import { Card } from "antd";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import {
  Bar,
  CartesianGrid,
  ComposedChart,
  Legend,
  ReferenceLine,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis
} from "recharts";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import TimeTicketsDatesSelector from "../ticket-tickets-dates-selector/time-tickets-dates-selector.component";

const graphProps = {
  strokeWidth: 3
};

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
});

const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(ScoreboardTicketsBar);

export function ScoreboardTicketsBar({ data, bodyshop }) {
  const { t } = useTranslation();
  return (
    <Card title={t("scoreboard.labels.productivetimeticketsoverdate")} extra={<TimeTicketsDatesSelector />}>
      <ResponsiveContainer width="100%" height={475} minHeight={100}>
        <ComposedChart data={data.chartData} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
          <CartesianGrid stroke="#f5f5f5" />
          <XAxis dataKey="date" strokeWidth={graphProps.strokeWidth} />
          <YAxis strokeWidth={graphProps.strokeWidth} />
          <Tooltip />
          <Legend />
          <ReferenceLine
            y={bodyshop.scoreboard_target.dailyBodyTarget + bodyshop.scoreboard_target.dailyPaintTarget}
            label="Daily Target"
            stroke="red"
            strokeDasharray="3 3"
          />
          {data &&
            data.employees.map((e, idx) => (
              <Bar
                key={`${e}productive`}
                name={e}
                dataKey={`employees.${e}.productive`}
                stackId="productive"
                // barSize={20}
                fill={data.colors[idx]}
              >
                {/* <LabelList position="top" /> */}
              </Bar>
            ))}
        </ComposedChart>
      </ResponsiveContainer>
    </Card>
  );
}
