import { Card, Col, Row, Statistic, Typography } from "antd";
import ResponsiveTable from "../responsive-table/responsive-table.component";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";

const mapStateToProps = createStructuredSelector({});

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

export function ScoreboardTicketsStats({ data }) {
  const { t } = useTranslation();
  const columns = [
    {
      title: t("employees.fields.employee_number"),
      dataIndex: "employee_number",
      key: "employee_number",
      sorter: (a, b) => a.employee_number - b.employee_number
    },
    {
      title: t("scoreboard.labels.thisweek"),
      dataIndex: "totalThisWeek",
      key: "totalThisWeek",
      sorter: (a, b) => a.totalThisWeek - b.totalThisWeek
    },
    {
      title: t("scoreboard.labels.lastweek"),
      dataIndex: "totalLastWeek",
      key: "totalLastWeek",
      sorter: (a, b) => a.totalLastWeek - b.totalLastWeek
    },
    {
      title: t("scoreboard.labels.thismonth"),
      dataIndex: "totalThisMonth",
      key: "totalThisMonth",
      sorter: (a, b) => a.totalThisMonth - b.totalThisMonth
    },
    {
      title: t("scoreboard.labels.lastmonth"),
      dataIndex: "totalLastMonth",
      key: "totalLastMonth",
      sorter: (a, b) => a.totalLastMonth - b.totalLastMonth
    },
    {
      title: t("scoreboard.labels.totaloverperiod"),
      dataIndex: "totalOverPeriod",
      key: "totalOverPeriod",
      sorter: (a, b) => a.totalOverPeriod - b.totalOverPeriod
    },
    {
      title: t("scoreboard.labels.efficiencyoverperiod"),
      dataIndex: "efficiencyoverperiod",
      key: "efficiencyoverperiod",
      render: (text, record) =>
        `${((record.totalOverPeriod / (record.actualTotalOverPeriod || 0.1)) * 100).toFixed(1)} %`
    }
  ];

  const tableData = data
    ? Object.keys(data.employees).map((key) => {
        return { employee_number: key, ...data.employees[key] };
      })
    : [];

  return (
    <Card title={t("scoreboard.labels.productivestatistics")}>
      <Row gutter={[16, 16]}>
        <Col md={24} lg={4}>
          <Row gutter={[16, 16]}>
            <Col span={12}>
              <Statistic title={t("scoreboard.labels.lastweek")} value={data.totalLastWeek} />
            </Col>
            <Col span={12}>
              <Statistic title={t("scoreboard.labels.lastmonth")} value={data.totalLastMonth} />
            </Col>
          </Row>
          <Row gutter={[16, 16]}>
            <Col span={12}>
              <Statistic title={t("scoreboard.labels.thisweek")} value={data.totalThisWeek} />
            </Col>
            <Col span={12}>
              <Statistic title={t("scoreboard.labels.thismonth")} value={data.totalThisMonth} />
            </Col>
          </Row>
          <Row gutter={[16, 16]}>
            <Col span={12}>
              <Statistic title={t("scoreboard.labels.totaloverperiod")} value={data.totalOverPeriod} />
            </Col>
            <Col span={12}>
              <Statistic
                title={t("scoreboard.labels.efficiencyoverperiod")}
                value={`${data.totalEffieciencyOverPeriod || 0}%`}
              />
            </Col>
          </Row>
          <Typography.Text type="secondary">{t("scoreboard.labels.calendarperiod")}</Typography.Text>
        </Col>
        <Col md={24} lg={20}>
          <ResponsiveTable
            columns={columns}
            mobileColumnKeys={["employee_number", "totalThisWeek", "totalLastWeek", "totalThisMonth"]}
            rowKey="employee_number"
            dataSource={tableData}
            id="employee_number"
            scroll={{ y: "300px" }}
          />
        </Col>
      </Row>
    </Card>
  );
}
