import cx from 'clsx';
import { isEqual } from 'lodash-es';
import { ChangeEvent, useMemo, useState } from 'react';
import { useColorFunction } from '../ColorFunctionContext';
import { HSegmentedControl } from '../components/HSegmentedControl';
import { ScrollArea } from '../components/ScrollArea';
import { ColorDescription } from '../models';
import { ColorCard } from '../page-components/cards-detail/ColorCard';
import { mapToObject } from '../utls';
import styles from './CardsDetail.module.css';

type ColorModes = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
type CardsDetailProps = {
  mainTag: string;
};

export function CardsDetail({ mainTag }: CardsDetailProps) {
  const { colorFn } = useColorFunction();
  const categories = useMemo(() => {
    if (!colorFn) {
      return [];
    }
    try {
      const embededCategories = colorFn.color_categories().map(mapToObject) as {
        label: string;
        value: string;
      }[];
      console.debug('[Fetch color categories]', embededCategories);
      return embededCategories.filter((cate) => !isEqual(cate.value, 'unknown'));
    } catch (e) {
      console.error('[Fetch color categories]', e);
    }
    return [];
  }, [colorFn]);
  const [colorCategory, setCategory] = useState<string | 'null'>('null');
  const handleSelectCategory = (e: ChangeEvent<HTMLSelectElement>) => {
    const selectedValue = e.target.value;
    setCategory(selectedValue);
  };
  const [mode, setMode] = useState<ColorModes>('hex');
  const colors = useMemo(() => {
    if (!colorFn) {
      return [];
    }
    try {
      const colorCate = isEqual(colorCategory, 'null') ? undefined : colorCategory;
      let tag = '';
      switch (mainTag) {
        case 'japanese':
          tag = 'japanese_traditional';
          break;
        case 'chinese':
          tag = 'chinese_traditional';
          break;
        default:
          tag = '';
          break;
      }
      const embedColors = colorFn.search_color_cards(tag, colorCate) as ColorDescription[];
      console.debug('[Fetch cards]', embedColors);
      return embedColors;
    } catch (e) {
      console.error('[Fetch colors]', e);
    }
    return [];
  }, [colorFn, mainTag, colorCategory]);

  return (
    <div className={cx('workspace', styles.cards_workspace)}>
      <div className={styles.filters}>
        <span>Show</span>
        <select
          className={styles.cate_select}
          value={colorCategory}
          onChange={handleSelectCategory}>
          <option value="null">All</option>
          {categories.map((cate, index) => (
            <option key={`${cate.value}-${index}`} value={cate.value}>
              {cate.label}
            </option>
          ))}
        </select>
        <span>colors.</span>
        <div>Copy color value in</div>
        <HSegmentedControl
          options={[
            { label: 'HEX', value: 'hex' },
            { label: 'RGB', value: 'rgb' },
            { label: 'HSL', value: 'hsl' },
            { label: 'LAB', value: 'lab' },
            { label: 'OKLCH', value: 'oklch' },
          ]}
          value={mode}
          onChange={(v) => setMode(v as ColorModes)}
        />
      </div>
      <ScrollArea enableY>
        <div className={styles.cards_container}>
          {colors.map((c, index) => (
            <div key={`${c.name}-${index}`} className={styles.card}>
              <ColorCard color={c} copyMode={mode} />
            </div>
          ))}
        </div>
      </ScrollArea>
    </div>
  );
}