import cx from 'clsx';
import { useState } from 'react';
import { ColorPicker } from '../components/ColorPicker';
import { HSegmentedControl } from '../components/HSegmentedControl';
import { Labeled } from '../components/Labeled';
import { ScrollArea } from '../components/ScrollArea';
import { HCTCompare } from '../page-components/color-compare/HCTCompare';
import { HSLCompare } from '../page-components/color-compare/HSLCompare';
import { OklchCompare } from '../page-components/color-compare/OKLCHCompare';
import { RGBCompare } from '../page-components/color-compare/RGBCompare';
import { ShadeScale } from '../page-components/color-compare/ShadeScale';
import { TintScale } from '../page-components/color-compare/TintScale';
import styles from './Compare.module.css';

export function ColorCompare() {
  const [basicColor, setBasicColor] = useState('000000');
  const [compareColor, setCompareColor] = useState('000000');
  const [analysisMode, setMode] = useState<'relative' | 'absolute'>('relative');

  return (
    <div className={cx('workspace', styles.compare_workspace)}>
      <header>
        <h3>Color Compare</h3>
        <p>
          Compare the properties of two colors and find the associated patterns of color change.
        </p>
      </header>
      <ScrollArea enableY>
        <div className={styles.compare_content}>
          <div className={styles.compare_column}>
            <h5>Basic Color</h5>
            <ColorPicker color={basicColor} onSelect={setBasicColor} />
          </div>
          <div className={styles.compare_column}>
            <h5>Compare Color</h5>
            <ColorPicker color={compareColor} onSelect={setCompareColor} />
          </div>
          <div className={styles.compare_column}>
            <h5>Compare Result</h5>
            <Labeled label="Analysis Mode">
              <HSegmentedControl
                options={[
                  { label: 'Absolute', value: 'absolute' },
                  { label: 'Relative', value: 'relative' },
                ]}
                value={analysisMode}
                onChange={(v) => setMode(v as Parameters<typeof setMode>[0])}
              />
            </Labeled>
            <RGBCompare basic={basicColor} compare={compareColor} mode={analysisMode} />
            <HSLCompare basic={basicColor} compare={compareColor} mode={analysisMode} />
            <HCTCompare basic={basicColor} compare={compareColor} mode={analysisMode} />
            <OklchCompare basic={basicColor} compare={compareColor} mode={analysisMode} />
            <TintScale basic={basicColor} compare={compareColor} />
            <ShadeScale basic={basicColor} compare={compareColor} />
          </div>
        </div>
      </ScrollArea>
    </div>
  );
}