import { isArray } from 'lodash-es';
import { ColorStand } from '../../components/ColorStand';
import { SchemeSet } from '../../stores/schemes';
import styles from './SchemeContent.module.css';

type ColorSeriesProps = {
  title: string;
  series: SchemeSet['lightScheme' | 'darkScheme']['primary'];
  simpleSeries?: boolean;
};

function ColorSeries({ title, series, simpleSeries = false }: ColorSeriesProps) {
  return (
    <div className={styles.series_row}>
      <h4>{title}</h4>
      <ul>
        <ColorStand title="Normal" color={series?.normal} />
        {simpleSeries ? (
          <>
            <ColorStand title="Lightness" color={series?.lighten} />
            <ColorStand title="Darkness" color={series?.darken} />
          </>
        ) : (
          <>
            <ColorStand title="Hover" color={series?.hover} />
            <ColorStand title="Active" color={series?.active} />
            <ColorStand title="Focus" color={series?.focus} />
            <ColorStand title="Disabled" color={series?.disabled} />
          </>
        )}
      </ul>
    </div>
  );
}

type SchemeContentProps = {
  scheme: SchemeSet['lightScheme' | 'darkScheme'];
};

export function SchemeContent({ scheme }: SchemeContentProps) {
  return (
    <div className={styles.scheme_content}>
      <ColorSeries title="Foreground Series" series={scheme.foreground} simpleSeries />
      <ColorSeries title="Background Series" series={scheme.background} simpleSeries />
      <ColorSeries title="Primary Series" series={scheme.primary} />
      {isArray(scheme.secondary) ? (
        scheme.secondary.map((cSet, index) => (
          <ColorSeries title={`Secondary Series ${index + 1}`} series={cSet} />
        ))
      ) : (
        <ColorSeries title="Secondary Series" series={scheme.secondary} />
      )}
      <ColorSeries title="Accent Series" series={scheme.accent} />
      <ColorSeries title="Neutral Serias" series={scheme.neutral} />
      <ColorSeries title="Success Series" series={scheme.success} />
      <ColorSeries title="Danger Series" series={scheme.danger} />
      <ColorSeries title="Warn Series" series={scheme.warning} />
      <ColorSeries title="Info Series" series={scheme.info} />
    </div>
  );
}