import React, { useState } from 'react';
import {
  GraphCard,
  GraphCardBody,
  GraphCardFooter,
  GraphCardHeader,
} from "./index.styled";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { CalendarIcon } from "../../assets/svg/calendar";
import { DownloadIcon } from "../../assets/svg/download";
import GraphChart from "./graphData";
import CustomDatePickerHeader from "./dateNavigation";

/**
 * @param {{
 *  onClick: function,
 *  style: CSSProperties,
 * }} props - properties of Component
 *
 */
import useTranslation from "../../hooks/useTranslation.jsx";
import wordStore from "../../mc/wordStore.json";
const GraphComponent = (props) => {
  const { findText } = useTranslation(wordStore);
  const [activeTab, setActiveTab] = useState(1);
  const [dateRange, setDateRange] = useState({
    startDate: new Date(),
    endDate: new Date(),
  });
  return (
    <GraphCard style={props.style}>
      <GraphCardHeader>
        <div className="time-calc-wrapper">
          <div className="total-time">
            <h6>{findText("Total time (sec)")}</h6>
            <h3> {props.totalTime}</h3>
          </div>
          <div className="projected-time">
            <h6>{findText("Projected Time (sec)")}</h6>
            <h3> {props.projectedTime} </h3>
          </div>
        </div>
        <div className="date-wrapper">
          <div className="datepicker__wrapper">
            <DatePicker
              selected={dateRange.startDate}
              startDate={dateRange.startDate}
              dateFormat={findText("d MMM yyyy")}
              renderCustomHeader={({ date, decreaseMonth, increaseMonth }) => (
                <CustomDatePickerHeader
                  selected={date}
                  onMonthChange={(value) => {
                    if (value === -1) {
                      decreaseMonth();
                    } else if (value === 1) {
                      increaseMonth();
                    }
                  }}
                />
              )}
              onChange={(dates) =>
                setDateRange({
                  ...dateRange,
                  startDate: dates,
                })
              }
              calendarClassName={findText("datepicker_style")}
            />
            <CalendarIcon />
          </div>
          <span>{findText("to")}</span>
          <div className="datepicker__wrapper">
            <DatePicker
              selected={dateRange.endDate}
              endDate={dateRange.endDate}
              dateFormat={findText("d MMM yyyy")}
              renderCustomHeader={({ date, decreaseMonth, increaseMonth }) => (
                <CustomDatePickerHeader
                  selected={date}
                  onMonthChange={(value) => {
                    if (value === -1) {
                      decreaseMonth();
                    } else if (value === 1) {
                      increaseMonth();
                    }
                  }}
                />
              )}
              onChange={(dates) =>
                setDateRange({
                  ...dateRange,
                  endDate: dates,
                })
              }
              calendarClassName={findText("datepicker_style")}
            />
            <CalendarIcon />
          </div>

          <div className="download__wrapper">
            <DownloadIcon />
          </div>
        </div>
      </GraphCardHeader>

      <GraphCardBody>
        <GraphChart width={650} height={250} activeTab={activeTab} />
      </GraphCardBody>

      <GraphCardFooter>
        <span
          className={activeTab === 1 ? 'active' : ''}
          onClick={() => setActiveTab(1)}
        >
          {findText("D")}
        </span>

        <span
          className={activeTab === 2 ? 'active' : ''}
          onClick={() => setActiveTab(2)}
        >
          {findText("W")}
        </span>

        <span
          className={activeTab === 3 ? 'active' : ''}
          onClick={() => setActiveTab(3)}
        >
          {findText("M")}
        </span>
      </GraphCardFooter>
    </GraphCard>
  );
};
export default GraphComponent;
