import { RadarChartOutlined } from "@ant-design/icons";
import { Popover, Space } from "antd";
import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Legend, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart, Tooltip } from "recharts";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import BlurWrapperComponent from "../feature-wrapper/blur-wrapper.component";
import { UpsellMaskWrapper, upsellEnum } from "../upsell/upsell.component";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});

export function ScheduleCalendarHeaderGraph({ bodyshop, loadData }) {
  const { ssbuckets } = bodyshop;
  const { t } = useTranslation();
  const data = useMemo(() => {
    return (
      (loadData &&
        loadData.expectedLoad &&
        Object.keys(loadData.expectedLoad).map((key) => {
          const metadataBucket = ssbuckets.filter((b) => b.id === key)[0];

          return {
            bucket: loadData.expectedLoad[key].label,
            current: loadData.expectedLoad[key].count,
            target: metadataBucket && metadataBucket.target
          };
        })) ||
      []
    );
  }, [loadData, ssbuckets]);

  const popContent = (
    <div>
      <Space>
        {t("appointments.labels.expectedprodhrs")}
        <BlurWrapperComponent featureName="smartscheduling">
          <strong>{loadData?.expectedHours?.toFixed(1)}</strong>
        </BlurWrapperComponent>
        {t("appointments.labels.expectedjobs")}
        <BlurWrapperComponent featureName="smartscheduling">
          <strong>{loadData?.expectedJobCount}</strong>
        </BlurWrapperComponent>
      </Space>
      <UpsellMaskWrapper upsell={upsellEnum.smartscheduling.general}>
        <BlurWrapperComponent featureName="smartscheduling">
          <RadarChart
            // cx={300}
            // cy={250}
            // outerRadius={150}
            width={800}
            height={600}
            data={data}
          >
            <PolarGrid />
            <PolarAngleAxis dataKey="bucket" />
            <PolarRadiusAxis angle={90} />
            <Radar name="Ideal Load" dataKey="target" stroke="darkgreen" fill="white" fillOpacity={0} />
            <Radar name="EOD Load" dataKey="current" stroke="dodgerblue" fill="dodgerblue" fillOpacity={0.6} />
            <Tooltip />
            <Legend />
          </RadarChart>
        </BlurWrapperComponent>
      </UpsellMaskWrapper>
    </div>
  );

  return (
    <Popover trigger="hover" placement="bottom" content={popContent}>
      <RadarChartOutlined />
    </Popover>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(ScheduleCalendarHeaderGraph);