import React, { useMemo } from "react";
import Checkbox from "antd/es/checkbox/Checkbox";
import {LAYER_IDS} from "./constants.js";
import {useLayersVisibility} from "../stores/useLayersVisibility.js";
import { Image } from "antd";
import { CONSUMER_COLOR, CONSUMER_COLOR_COOLING, SOURCE_COLOR } from "./Layers/layers-config.js";
import {useDzkhFilters} from "../stores/useDzkhFilters.js";
import dispIcon from "../assets/circle.svg";

export const LegendPointItem = ({color, imageSrc, name, border}) => {
  return (
    <div className="flex gap-2 items-center">
      {imageSrc && <Image src={imageSrc} width={18} height={18} className='flex items-center' preview={false}/>}
      {color && !imageSrc && (
        <span className="w-4 h-[100%] flex items-center justify-center">
          <span
            className={`rounded-xl w-3 h-3 inline-block ${border && "border-black border-[1px] border-solid"}`}
            style={{backgroundColor: color}}
          />
        </span>
      )}

      <span className='text-xs text-grey'>{name}</span>
    </div>
  );
};

const LegendColorRampItem = ({colors, name, desc}) => {
  return (
    <div>
      <span className='text-xs text-grey'>{name}</span>
      <div className="w-[200px]">
        <div
          className={"w-full h-[10px] rounded-xl"}
          style={{
            background: `linear-gradient(to right, ${colors.join(",")})`,
          }}
        />
      </div>

      <span className="text-xs text-grey italic">{desc} →</span>
    </div>
  );
};

const consumerColors = CONSUMER_COLOR.stops.map(stop => stop[1])
const sourceColors = SOURCE_COLOR.stops.map(stop => stop[1])

export function Legend() {
  const { toggleVisibility, isVisible } = useLayersVisibility();
  const { consumer_filter, source_filter } = useDzkhFilters();
  const isCooling = useMemo(() => {
    return consumer_filter && consumer_filter.key.includes('cooling')
  }, [consumer_filter])
  const consumerColors = useMemo(() => {
    if (isCooling) return CONSUMER_COLOR_COOLING.stops.map(stop => stop[1]);
    return CONSUMER_COLOR.stops.map(stop => stop[1])
  }, [isCooling]);

  return (
    <div
      className="absolute bottom-[20px] right-[20px] text-xs text-grey z-10 bg-white-background rounded-xl p-3 space-y-3">
      <div>
        <div className="space-y-2 flex flex-col">
          <Checkbox
            className={"!ml-0"}
            onChange={() => toggleVisibility(LAYER_IDS.consumer)}
            checked={isVisible[LAYER_IDS.consumer]}
          >
            {
              consumer_filter ? <LegendColorRampItem
                colors={consumerColors}
                name="Consumer"
                desc={consumer_filter.key.includes("prob") ? "failure likelihood" : consumer_filter.key.includes("cooling_time") ? "cooling time, h" : "building priority"}
              /> : <LegendPointItem name="Consumer"/>
            }

          </Checkbox>

          <Checkbox
            className={"!ml-0"}
            onChange={() => toggleVisibility(LAYER_IDS.source)}
            checked={isVisible[LAYER_IDS.source]}
          >
            {
              source_filter ? <LegendColorRampItem
                colors={sourceColors}
                name="Source"
                desc={'failure likelihood'}
              /> : <LegendPointItem name="Source"/>
            }
          </Checkbox>

          <Checkbox
            className={"!ml-0 flex items-center"}
            onChange={() => toggleVisibility(LAYER_IDS.dispatcher)}
            checked={isVisible[LAYER_IDS.dispatcher]}
          >
            <LegendPointItem name="Dispatch center" imageSrc={dispIcon} />
          </Checkbox>
        </div>
      </div>
    </div>
  );
}
