import cc from 'classcat';
import { scaleOrdinal } from '@visx/scale';

import { COLORS, HEATMAP_COLORS } from '../config';

import './Legend.css';

interface LegendItemProps {
  color: string;
  label: string;
}

export const LegendItem = ({ color, label }: LegendItemProps) => {
  return (
    <div className="infografika-legend-item" title={label}>
      <div
        className="infografika-legend-item__color"
        style={{ background: color }}
      ></div>
      <div className="infografika-legend-item__label">{label}</div>
    </div>
  );
};

interface LegendOrdinalProps {
  keys: string[];

  colors?: string[];
  vertical?: boolean;
  justify?: 'start' | 'end' | 'center';
  className?: string;
  style?: React.CSSProperties;
}

export const LegendOrdinal = ({
  keys,
  colors = COLORS,
  vertical,
  justify,
  className,
  style,
}: LegendOrdinalProps) => {
  const colorScale = scaleOrdinal({
    domain: keys,
    range: colors,
  });

  const legendClassName = cc([
    'infografika',
    'infografika-legend',
    { 'infografika-legend--start': justify === 'start' },
    { 'infografika-legend--end': justify === 'end' },
    { 'infografika-legend--center': justify === 'center' },
    vertical ? 'infografika-legend--column' : 'infografika-legend--default',
    className,
  ]);

  return (
    <div className={legendClassName} style={style}>
      {keys.map((key, i) => {
        const color = colorScale(key);
        return <LegendItem color={color} label={key} key={key} />;
      })}
    </div>
  );
};

interface LegendGradientProps {
  min: number;
  max: number;
  colors?: string[];
  vertical?: boolean;
  reverse?: boolean;
  className?: string;
  style?: React.CSSProperties;
}

export const LegendGradient = ({
  min,
  max,
  colors = HEATMAP_COLORS,
  vertical,
  reverse,
  className,
  style,
}: LegendGradientProps) => {
  const legendClassName = cc([
    'infografika',
    'infografika-legend-gradient',
    { 'infografika-legend-gradient--reverse': reverse },
    { 'infografika-legend-gradient--vertical': vertical },
    className,
  ]);

  const gradient = vertical
    ? {
        background: `linear-gradient(to ${
          reverse ? 'top' : 'bottom'
        }, ${colors.join(',')})`,
      }
    : {
        background: `linear-gradient(to ${
          reverse ? 'left' : 'right'
        }, ${colors.join(',')})`,
      };

  return (
    <div className={legendClassName} style={style}>
      <div className="infografika-legend-item__value">{min}</div>
      <div className="infografika-legend__gradient" style={gradient}></div>
      <div className="infografika-legend-item__value">{max}</div>
    </div>
  );
};