import { useState } from 'react';
import { RtFrame, RtFrameLayers } from '@dpa/react-frame-intro';
import { RtText } from '@dpa/react-text';

function Selector({ onMode, onTheme, onAchr, mode, theme, achr }) {
  const modes = ['base', 'mono', 'filling', 'coloring'];
  const themes = ['light', 'dark'];
  const ahcromatics = ['inverted', 'non-inverted'];
  return (
    <div
      style={{ display: 'flex', flexDirection: 'column', padding: '5px 20px' }}
    >
      <select name="mode" onChange={(e) => onMode(e.target.value)} value={mode}>
        {modes.map((m) => (
          <option value={m} key={m}>
            {m}
          </option>
        ))}
      </select>
      <select
        name="theme"
        onChange={(e) => onTheme(e.target.value)}
        value={theme}
      >
        {themes.map((m) => (
          <option value={m} key={m}>
            {m}
          </option>
        ))}
      </select>
      {/*<select name="achr" onChange={(e) => onAchr(e.target.value)} value={achr}>*/}
      {/*  {ahcromatics.map(m => <option value={m} key={m}>{m}</option>)}*/}
      {/*</select>*/}
    </div>
  );
}

export function DemoPage() {
  const [first, setFirst] = useState<RtFrameLayers>({
    modifier: 'base',
    theme: 'light',
    achromatic: 'non-inverted',
  });
  const [second, setSecond] = useState<RtFrameLayers>({
    modifier: 'mono',
    theme: 'dark',
    achromatic: 'non-inverted',
  });
  const [third, setThird] = useState<RtFrameLayers>({
    modifier: 'filling',
    theme: 'light',
    achromatic: 'inverted',
  });

  return (
    <RtFrame
      as="div"
      surface="control"
      modifier={first.modifier}
      theme={first.theme}
      style={{ width: '400px', margin: '50px auto' }}
    >
      <RtText typography="symbol-md-primary" as="div">
        First Layer
      </RtText>

      <Selector
        mode={first.modifier}
        theme={first.theme}
        achr={first.achromatic}
        onMode={(v: any) => setFirst((s) => ({ ...s, modifier: v }))}
        onAchr={(v: any) => setFirst((s) => ({ ...s, achromatic: v }))}
        onTheme={(v: any) => setFirst((s) => ({ ...s, theme: v }))}
      />

      <RtFrame
        as="div"
        surface="control"
        modifier={second.modifier}
        theme={second.theme}
      >
        <RtText typography="symbol-md-primary">Second Layer</RtText>

        <Selector
          mode={second.modifier}
          theme={second.theme}
          achr={second.achromatic}
          onMode={(v: any) => setSecond((s) => ({ ...s, modifier: v }))}
          onAchr={(v: any) => setSecond((s) => ({ ...s, achromatic: v }))}
          onTheme={(v: any) => setSecond((s) => ({ ...s, theme: v }))}
        />

        <RtFrame
          as="div"
          surface="control"
          modifier={third.modifier}
          theme={third.theme}
        >
          <RtText typography="symbol-md-primary">Third Layer</RtText>

          <Selector
            mode={third.modifier}
            theme={third.theme}
            achr={third.achromatic}
            onMode={(v: any) => setThird((s) => ({ ...s, modifier: v }))}
            onAchr={(v: any) => setThird((s) => ({ ...s, achromatic: v }))}
            onTheme={(v: any) => setThird((s) => ({ ...s, theme: v }))}
          />
        </RtFrame>
      </RtFrame>
    </RtFrame>
  );
}