import React from "react";
import { baseStyles, Text, SVG, theme } from "@local-logic/core/ui";
import useMeasure from "~/hooks/useMeasure";
import useTranslator from "~/hooks/useTranslator";
import { useLocalLogic } from "~/context";
import { translations as t } from "./translations";
import useHelpers from "../../useHelpers";
import { useRootElement } from "../context";
import * as S from "./styles";
import { BarChartProps } from "./types";

export const BarChart = ({
  options: {
    locationIcon,
    cityIcon,
    neighbourhoodIcon,
    renderCityAvg,
    renderNeighbourhoodAvg,
  } = {},
}: BarChartProps) => {
  const {
    options: { scoresData, score },
  } = useRootElement();
  const { options } = useLocalLogic();
  const {
    scoreVal,
    cityName,
    cityScoreVal,
    neighbourhoodName,
    neighbourhoodScoreVal,
  } = useHelpers({
    score,
    scoresData,
  });
  const { translations } = useTranslator([t]);
  const isUsingIcons = !!locationIcon || !!cityIcon || !!neighbourhoodIcon;
  const [ref, rect] = useMeasure<HTMLDivElement>();
  const placeholderElement = <div></div>;

  const renderIcon = (icon: React.FC | undefined) => {
    if (icon) {
      return (
        <SVG
          width={20}
          height={20}
          SVGElement={icon}
          fill={theme["--ll-color-on-background-variant1"]}
        />
      );
    }

    return isUsingIcons ? placeholderElement : undefined;
  };

  if (scoreVal === null) {
    return null;
  }

  return (
    <>
      <S.BarChartContainer $isUsingIcons={isUsingIcons} ref={ref}>
        <>
          {renderIcon(locationIcon)}
          <Text
            variant="p"
            weight="--ll-font-weight-bold"
            noMargin
            color="--ll-color-on-background-variant1"
          >
            {translations.LOCATION}
          </Text>
          <S.BarChartBackground>
            <S.BarChartLine
              $renderForPrint={options?.renderForPrint}
              animate={{ width: `${(scoreVal / 10) * 100}%` }}
              transition={
                options?.renderForPrint === true
                  ? { delay: 0, duration: 0 }
                  : { delay: 0.3, ...baseStyles.transitions.spring }
              }
            />
          </S.BarChartBackground>
          <Text
            variant="p"
            weight="--ll-font-weight-bold"
            noMargin
            align="right"
            color="--ll-color-on-background-variant1"
          >
            {scoreVal}
          </Text>
        </>
        {/* We are removing the neighbourhood average until we determine a bundling strategy for neighbourhood content. */}
        {neighbourhoodScoreVal !== null && renderNeighbourhoodAvg !== false && (
          <>
            {renderIcon(neighbourhoodIcon)}
            <S.DistrictTextContainer $maxWidth={rect.width / 2}>
              <S.DistrictText
                variant="p"
                lineClamp={1}
                noMargin
                color="--ll-color-on-background-variant1"
              >
                {neighbourhoodName || translations.NEIGHBOURHOOD}
              </S.DistrictText>
              <S.AverageText>
                <Text
                  variant="p"
                  noMargin
                  color="--ll-color-on-background-variant1"
                >
                  {translations.AVG}
                </Text>
              </S.AverageText>
            </S.DistrictTextContainer>
            <S.BarChartBackground>
              <S.BarChartLine
                animate={{ width: `${(neighbourhoodScoreVal / 10) * 100}%` }}
                transition={{ delay: 0.5, ...baseStyles.transitions.spring }}
              />
            </S.BarChartBackground>
            <Text
              variant="p"
              noMargin
              align="right"
              color="--ll-color-on-background-variant1"
            >
              {neighbourhoodScoreVal}
            </Text>
          </>
        )}
        {cityScoreVal !== null && renderCityAvg !== false && (
          <>
            {renderIcon(cityIcon)}
            <S.DistrictTextContainer $maxWidth={rect.width / 2}>
              <S.DistrictText
                variant="p"
                noMargin
                color="--ll-color-on-background-variant1"
              >
                {cityName || translations.CITY}
              </S.DistrictText>
              <S.AverageText>
                <Text
                  variant="p"
                  noMargin
                  color="--ll-color-on-background-variant1"
                >
                  {translations.AVG}
                </Text>
              </S.AverageText>
            </S.DistrictTextContainer>
            <S.BarChartBackground>
              <S.BarChartLine
                animate={{ width: `${(cityScoreVal / 10) * 100}%` }}
                transition={{ delay: 0.4, ...baseStyles.transitions.spring }}
              />
            </S.BarChartBackground>
            <Text
              variant="p"
              noMargin
              align="right"
              color="--ll-color-on-background-variant1"
            >
              {cityScoreVal}
            </Text>
          </>
        )}
      </S.BarChartContainer>
    </>
  );
};