import { Card, Col, Row, Space, Statistic, Switch, Typography } from "antd";
import dayjs from "../../utils/day";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import * as Util from "../scoreboard-targets-table/scoreboard-targets-table.util";

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

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

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    const item = localStorage.getItem(key);
    return item ? JSON.parse(item) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(storedValue));
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
}

export function ScoreboardTicketsStats({ data, jobData, bodyshop }) {
  const { t } = useTranslation();
  const [isLarge, setIsLarge] = useLocalStorage("isLargeStatistic", false);

  const statisticSize = isLarge ? 36 : 24;
  const statisticWeight = isLarge ? 550 : "normal";
  const daySpan = Util.CalculateWorkingDaysInPeriod(dayjs().startOf("week"), dayjs().endOf("week")) > 5 ? 3 : 4;

  return (
    <Card
      title={t("scoreboard.labels.productivestatistics")}
      extra={
        <Space>
          <Typography.Text>{t("general.labels.tvmode")}</Typography.Text>
          <Switch onClick={() => setIsLarge(!isLarge)} defaultChecked={isLarge} />
        </Space>
      }
    >
      <Row gutter={[16, 16]}>
        <Col md={24}>
          {/* Daily Stats */}
          <Space orientation="vertical" size="middle" style={{ display: "flex" }}>
            <Row gutter={[16, 16]} align="center">
              {["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"].map((day) => {
                if (bodyshop.workingdays[day] === true) {
                  return (
                    <Col key={day} span={daySpan} align="center">
                      <Card size="small" title={t("general.labels." + day)}>
                        <Row gutter={[8, 8]}>
                          <Col span={24}>
                            <Statistic
                              value={data.seperatedThisWeek[day].total}
                              styles={{
                                content: {
                                  color:
                                    parseFloat(data.seperatedThisWeek[day].total) >=
                                    bodyshop.scoreboard_target.dailyBodyTarget +
                                      bodyshop.scoreboard_target.dailyPaintTarget
                                      ? "green"
                                      : "red",
                                  fontSize: statisticSize,
                                  fontWeight: statisticWeight
                                }
                              }}
                            />
                          </Col>
                        </Row>
                        <Row gutter={[16, 16]}>
                          <Col span={12}>
                            <Statistic
                              title={<Typography.Text strong>{t("scoreboard.labels.body")}</Typography.Text>}
                              value={data.seperatedThisWeek[day].lab}
                              styles={{
                                content: {
                                  color:
                                    parseFloat(data.seperatedThisWeek[day].lab) >=
                                    bodyshop.scoreboard_target.dailyBodyTarget
                                      ? "green"
                                      : "red",
                                  fontSize: statisticSize,
                                  fontWeight: statisticWeight
                                }
                              }}
                            />
                          </Col>
                          <Col span={12}>
                            <Statistic
                              title={<Typography.Text strong>{t("scoreboard.labels.refinish")}</Typography.Text>}
                              value={data.seperatedThisWeek[day].lar}
                              styles={{
                                content: {
                                  color:
                                    parseFloat(data.seperatedThisWeek[day].lar) >=
                                    bodyshop.scoreboard_target.dailyPaintTarget
                                      ? "green"
                                      : "red",
                                  fontSize: statisticSize,
                                  fontWeight: statisticWeight
                                }
                              }}
                            />
                          </Col>
                        </Row>
                      </Card>
                    </Col>
                  );
                } else {
                  return null;
                }
              })}
            </Row>
            {/* Weekly Stats */}
            <Row gutter={[16, 16]}>
              {/* This Week */}
              <Col span={8} align="center">
                <Card size="small" title={t("scoreboard.labels.thisweek")}>
                  <Row gutter={[16, 16]}>
                    <Col span={24}>
                      <Statistic
                        value={data.totalThisWeek}
                        styles={{
                          content: {
                            color:
                              parseFloat(data.totalThisWeek) >=
                              Util.WeeklyTargetHrsInPeriod(
                                bodyshop.scoreboard_target.dailyBodyTarget,
                                dayjs().startOf("week"),
                                dayjs().endOf("week"),
                                bodyshop
                              ) +
                                Util.WeeklyTargetHrsInPeriod(
                                  bodyshop.scoreboard_target.dailyPaintTarget,
                                  dayjs().startOf("week"),
                                  dayjs().endOf("week"),
                                  bodyshop
                                )
                                ? "green"
                                : "red",
                            fontSize: statisticSize,
                            fontWeight: statisticWeight
                          }
                        }}
                      />
                    </Col>
                  </Row>
                  <Row gutter={[16, 16]}>
                    <Col span={12}>
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.body")}</Typography.Text>}
                        value={data.totalThisWeekLAB}
                        styles={{
                          content: {
                            color:
                              parseFloat(data.totalThisWeekLAB) >=
                              Util.WeeklyTargetHrsInPeriod(
                                bodyshop.scoreboard_target.dailyBodyTarget,
                                dayjs().startOf("week"),
                                dayjs().endOf("week"),
                                bodyshop
                              )
                                ? "green"
                                : "red",
                            fontSize: statisticSize,
                            fontWeight: statisticWeight
                          }
                        }}
                      />
                    </Col>
                    <Col span={12}>
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.refinish")}</Typography.Text>}
                        value={data.totalThisWeekLAR}
                        styles={{
                          content: {
                            color:
                              parseFloat(data.totalThisWeekLAR) >=
                              Util.WeeklyTargetHrsInPeriod(
                                bodyshop.scoreboard_target.dailyPaintTarget,
                                dayjs().startOf("week"),
                                dayjs().endOf("week"),
                                bodyshop
                              )
                                ? "green"
                                : "red",
                            fontSize: statisticSize,
                            fontWeight: statisticWeight
                          }
                        }}
                      />
                    </Col>
                  </Row>
                </Card>
              </Col>
              {/* Last Week */}
              <Col span={8} align="center">
                <Card size="small" title={t("scoreboard.labels.lastweek")}>
                  <Row gutter={[16, 16]}>
                    <Col span={24}>
                      <Statistic
                        value={data.totalLastWeek}
                        styles={{
                          content: {
                            color:
                              parseFloat(data.totalLastWeek) >=
                              Util.WeeklyTargetHrsInPeriod(
                                bodyshop.scoreboard_target.dailyBodyTarget,
                                dayjs().subtract(1, "week").startOf("week"),
                                dayjs().subtract(1, "week").endOf("week"),
                                bodyshop
                              ) +
                                Util.WeeklyTargetHrsInPeriod(
                                  bodyshop.scoreboard_target.dailyPaintTarget,
                                  dayjs().subtract(1, "week").startOf("week"),
                                  dayjs().subtract(1, "week").endOf("week"),
                                  bodyshop
                                )
                                ? "green"
                                : "red",
                            fontSize: statisticSize,
                            fontWeight: statisticWeight
                          }
                        }}
                      />
                    </Col>
                  </Row>
                  <Row gutter={[16, 16]}>
                    <Col span={12}>
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.body")}</Typography.Text>}
                        value={data.totalLastWeekLAB}
                        styles={{
                          content: {
                            color:
                              parseFloat(data.totalLastWeekLAB) >=
                              Util.WeeklyTargetHrsInPeriod(
                                bodyshop.scoreboard_target.dailyBodyTarget,
                                dayjs().subtract(1, "week").startOf("week"),
                                dayjs().subtract(1, "week").endOf("week"),
                                bodyshop
                              )
                                ? "green"
                                : "red",
                            fontSize: statisticSize,
                            fontWeight: statisticWeight
                          }
                        }}
                      />
                    </Col>
                    <Col span={12}>
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.refinish")}</Typography.Text>}
                        value={data.totalLastWeekLAR}
                        styles={{
                          content: {
                            color:
                              parseFloat(data.totalLastWeekLAR) >=
                              Util.WeeklyTargetHrsInPeriod(
                                bodyshop.scoreboard_target.dailyPaintTarget,
                                dayjs().subtract(1, "week").startOf("week"),
                                dayjs().subtract(1, "week").endOf("week"),
                                bodyshop
                              )
                                ? "green"
                                : "red",
                            fontSize: statisticSize,
                            fontWeight: statisticWeight
                          }
                        }}
                      />
                    </Col>
                  </Row>
                </Card>
              </Col>
              {/* Prior Week */}
              <Col span={8} align="center">
                <Card size="small" title={t("scoreboard.labels.priorweek")}>
                  <Row gutter={[16, 16]}>
                    <Col span={24}>
                      <Statistic
                        value={data.totalPriorWeek}
                        styles={{
                          content: {
                            color:
                              parseFloat(data.totalPriorWeek) >=
                              Util.WeeklyTargetHrsInPeriod(
                                bodyshop.scoreboard_target.dailyBodyTarget,
                                dayjs().subtract(2, "week").startOf("week"),
                                dayjs().subtract(2, "week").endOf("week"),
                                bodyshop
                              ) +
                                Util.WeeklyTargetHrsInPeriod(
                                  bodyshop.scoreboard_target.dailyPaintTarget,
                                  dayjs().subtract(2, "week").startOf("week"),
                                  dayjs().subtract(2, "week").endOf("week"),
                                  bodyshop
                                )
                                ? "green"
                                : "red",
                            fontSize: statisticSize,
                            fontWeight: statisticWeight
                          }
                        }}
                      />
                    </Col>
                  </Row>
                  <Row gutter={[16, 16]}>
                    <Col span={12}>
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.body")}</Typography.Text>}
                        value={data.totalPriorWeekLAB}
                        styles={{
                          content: {
                            color:
                              parseFloat(data.totalPriorWeekLAB) >=
                              Util.WeeklyTargetHrsInPeriod(
                                bodyshop.scoreboard_target.dailyBodyTarget,
                                dayjs().subtract(2, "week").startOf("week"),
                                dayjs().subtract(2, "week").endOf("week"),
                                bodyshop
                              )
                                ? "green"
                                : "red",
                            fontSize: statisticSize,
                            fontWeight: statisticWeight
                          }
                        }}
                      />
                    </Col>
                    <Col span={12}>
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.refinish")}</Typography.Text>}
                        value={data.totalPriorWeekLAR}
                        styles={{
                          content: {
                            color:
                              parseFloat(data.totalPriorWeekLAR) >=
                              Util.WeeklyTargetHrsInPeriod(
                                bodyshop.scoreboard_target.dailyPaintTarget,
                                dayjs().subtract(2, "week").startOf("week"),
                                dayjs().subtract(2, "week").endOf("week"),
                                bodyshop
                              )
                                ? "green"
                                : "red",
                            fontSize: statisticSize,
                            fontWeight: statisticWeight
                          }
                        }}
                      />
                    </Col>
                  </Row>
                </Card>
              </Col>
            </Row>
            {/* Monthly Stats */}
            <Row gutter={[16, 16]}>
              {/* This Month */}
              <Col span={7} align="center">
                <Card size="small" title={t("scoreboard.labels.thismonth")}>
                  <Row gutter={[16, 16]}>
                    <Col span={24}>
                      <Statistic
                        value={data.totalThisMonth}
                        styles={{
                          content: {
                            color:
                              parseFloat(data.totalThisMonth) >=
                              Util.MonthlyTargetHrs(bodyshop.scoreboard_target.dailyBodyTarget, bodyshop) +
                                Util.MonthlyTargetHrs(bodyshop.scoreboard_target.dailyPaintTarget, bodyshop)
                                ? "green"
                                : "red",
                            fontSize: statisticSize,
                            fontWeight: statisticWeight
                          }
                        }}
                      />
                    </Col>
                  </Row>
                  <Row gutter={[16, 16]}>
                    <Col span={12}>
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.body")}</Typography.Text>}
                        value={data.totalThisMonthLAB}
                        styles={{
                          content: {
                            color:
                              parseFloat(data.totalThisMonthLAB) >=
                              Util.MonthlyTargetHrs(bodyshop.scoreboard_target.dailyBodyTarget, bodyshop)
                                ? "green"
                                : "red",
                            fontSize: statisticSize,
                            fontWeight: statisticWeight
                          }
                        }}
                      />
                    </Col>
                    <Col span={12}>
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.refinish")}</Typography.Text>}
                        value={data.totalThisMonthLAR}
                        styles={{
                          content: {
                            color:
                              parseFloat(data.totalThisMonthLAR) >=
                              Util.MonthlyTargetHrs(bodyshop.scoreboard_target.dailyPaintTarget, bodyshop)
                                ? "green"
                                : "red",
                            fontSize: statisticSize,
                            fontWeight: statisticWeight
                          }
                        }}
                      />
                    </Col>
                  </Row>
                </Card>
              </Col>
              {/* Last Month */}
              <Col span={7} align="center">
                <Card size="small" title={t("scoreboard.labels.lastmonth")}>
                  <Row gutter={[16, 16]}>
                    <Col span={24}>
                      <Statistic
                        value={data.totalLastMonth}
                        styles={{
                          content: {
                            color:
                              parseFloat(data.totalLastMonth) >=
                              Util.LastMonthTargetHrs(bodyshop.scoreboard_target.dailyBodyTarget, bodyshop) +
                                Util.LastMonthTargetHrs(bodyshop.scoreboard_target.dailyPaintTarget, bodyshop)
                                ? "green"
                                : "red",
                            fontSize: statisticSize,
                            fontWeight: statisticWeight
                          }
                        }}
                      />
                    </Col>
                  </Row>
                  <Row gutter={[16, 16]}>
                    <Col span={12}>
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.body")}</Typography.Text>}
                        value={data.totalLastMonthLAB}
                        styles={{
                          content: {
                            color:
                              parseFloat(data.totalLastMonthLAB) >=
                              Util.LastMonthTargetHrs(bodyshop.scoreboard_target.dailyBodyTarget, bodyshop)
                                ? "green"
                                : "red",
                            fontSize: statisticSize,
                            fontWeight: statisticWeight
                          }
                        }}
                      />
                    </Col>
                    <Col span={12}>
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.refinish")}</Typography.Text>}
                        value={data.totalLastMonthLAR}
                        styles={{
                          content: {
                            color:
                              parseFloat(data.totalLastMonthLAR) >=
                              Util.LastMonthTargetHrs(bodyshop.scoreboard_target.dailyPaintTarget, bodyshop)
                                ? "green"
                                : "red",
                            fontSize: statisticSize,
                            fontWeight: statisticWeight
                          }
                        }}
                      />
                    </Col>
                  </Row>
                </Card>
              </Col>
              {/* Efficiency Over Period */}
              <Col span={7} align="center">
                <Card size="small" title={t("scoreboard.labels.efficiencyoverperiod")}>
                  <Row gutter={[16, 16]}>
                    <Col span={24}>
                      <Statistic
                        value={`${data.totalEffieciencyOverPeriod || 0}%`}
                        styles={{
                          content: {
                            fontSize: statisticSize,
                            fontWeight: statisticWeight
                          }
                        }}
                      />
                    </Col>
                  </Row>
                  <Row gutter={[16, 16]}>
                    <Col span={12}>
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.body")}</Typography.Text>}
                        value={`${data.totalEffieciencyOverPeriodLAB || 0}%`}
                        styles={{
                          content: {
                            fontSize: statisticSize,
                            fontWeight: statisticWeight
                          }
                        }}
                      />
                    </Col>
                    <Col span={12}>
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.refinish")}</Typography.Text>}
                        value={`${data.totalEffieciencyOverPeriodLAR || 0}%`}
                        styles={{
                          content: {
                            fontSize: statisticSize,
                            fontWeight: statisticWeight
                          }
                        }}
                      />
                    </Col>
                  </Row>
                </Card>
              </Col>
              <Col span={3} align="center">
                <Card size="small" title={t("scoreboard.labels.jobscompletednotinvoiced")}>
                  <Row gutter={[16, 16]}>
                    <Col span={24}>
                      <Statistic
                        value={jobData.count}
                        styles={{
                          content: {
                            fontSize: statisticSize,
                            fontWeight: statisticWeight
                          }
                        }}
                      />
                    </Col>
                  </Row>
                  <Row gutter={[16, 16]}>
                    <Col span={24}>
                      <Statistic
                        title={<Typography.Text strong>{t("scoreboard.labels.totalhrs")}</Typography.Text>}
                        value={jobData.tthrs}
                        styles={{
                          content: {
                            fontSize: statisticSize,
                            fontWeight: statisticWeight
                          }
                        }}
                      />
                    </Col>
                  </Row>
                </Card>
              </Col>
            </Row>
          </Space>
          {/* Disclaimer */}
          <Typography.Text type="secondary">*{t("scoreboard.labels.calendarperiod")}</Typography.Text>
        </Col>
      </Row>
    </Card>
  );
}
