import { RadarChartOutlined } from "@ant-design/icons";
import { Popover, Space } from "antd";
import { 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 { upsellEnum, UpsellMaskWrapper } from "../upsell/upsell.component";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
import { logImEXEvent } from "../../firebase/firebase.utils";

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

export function ScheduleCalendarHeaderGraph({ bodyshop, loadData }) {
  const { ssbuckets } = bodyshop;
  const { t } = useTranslation();
  const data = useMemo(() => {
    return (
      (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?.target
          };
        })) ||
      []
    );
  }, [loadData, ssbuckets]);
  const hasSmartSchedulingAccess = HasFeatureAccess({ featureName: "smartscheduling", bodyshop });

  const chartContents = (
    <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>
  );

  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>
      <BlurWrapperComponent featureName="smartscheduling">
        {hasSmartSchedulingAccess ? (
          chartContents
        ) : (
          <UpsellMaskWrapper upsell={upsellEnum().smartscheduling.general}>{chartContents}</UpsellMaskWrapper>
        )}
      </BlurWrapperComponent>
    </div>
  );

  return (
    <Popover
      trigger="hover"
      placement="bottom"
      onOpenChange={(open) => open && logImEXEvent("schedule_spider_graph", {})}
      content={popContent}
    >
      <RadarChartOutlined />
    </Popover>
  );
}

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