import { RtSnackbar, RtSnackbarProps } from '@dpa/react-snackbar';
import styles from './index.module.css';
import { RtText } from '@dpa/react-text';
import { useState } from 'react';
import {
  RtFrame,
  RtFrameSurfaceFoundation,
  RtModifier,
  RtTheme,
} from '@dpa/react-frame-intro';
import { RtSymbolAction } from '@dpa/react-symbol-action';

export function SnackbarPage() {
  const [modifier, setModifier] = useState<RtModifier>('base');
  const [theme, setTheme] = useState<RtTheme>('light');
  const [foundation, setFoundation] =
    useState<RtSnackbarProps['surface']>('foundation-pure');

  const modifierList: RtModifier[] = ['base', 'filling', 'mono', 'coloring'];
  const themeList: RtTheme[] = ['light', 'dark'];
  const foundationList: RtFrameSurfaceFoundation[] = [
    'foundation-pure',
    'foundation-tint',
    'foundation-low-tint',
    'foundation-high-tint',
  ];

  return (
    <RtFrame
      as="div"
      modifier={modifier}
      theme={theme}
      surface="foundation-low-tint"
      className={styles['snackbar-page']}
    >
      <div>
        <RtText typography="headline-lg-bold">
          Snackbar Foundations Example
        </RtText>
        <br />
        <RtText typography="symbol-sm-secondary">
          Конечно в snackbar только 2 foundation, но тут для примера больше
        </RtText>
      </div>

      <div style={{ display: 'flex', gap: '12px' }}>
        <select
          name="modifier"
          value={modifier}
          onChange={(e) => setModifier(e.target.value as RtModifier)}
        >
          {modifierList.map((m) => (
            <option key={m} value={m}>
              {m}
            </option>
          ))}
        </select>

        <select
          name="theme"
          value={theme}
          onChange={(e) => setTheme(e.target.value as RtTheme)}
        >
          {themeList.map((m) => (
            <option key={m} value={m}>
              {m}
            </option>
          ))}
        </select>

        <select
          name="foundation"
          value={foundation}
          onChange={(e) =>
            setFoundation(e.target.value as RtSnackbarProps['surface'])
          }
        >
          {foundationList.map((m) => (
            <option key={m} value={m}>
              {m}
            </option>
          ))}
        </select>
      </div>

      <RtSnackbar
        surface={foundation}
        use="primary"
        hint="hint"
        trailingActionLabel="hint"
        trailingAction={RtSymbolAction.Clear}
        width="full"
        radius="primary"
      />

      <div className={styles['snackbar-container']}>
        <RtSnackbar
          surface={foundation}
          use="primary"
          hint=""
          trailingActionLabel="Clear"
          trailingAction={RtSymbolAction.Info}
          width="full"
          radius="primary"
        />

        <RtSnackbar
          surface={foundation}
          use="secondary"
          hint="secondary"
          trailingActionLabel="Label"
          trailingAction={RtSymbolAction.Info}
          width="full"
        />

        <RtSnackbar
          surface={foundation}
          use="tertiary"
          hint="tertiary"
          trailingActionLabel="Label"
          trailingAction={RtSymbolAction.Info}
          width="full"
        />

        <RtSnackbar
          surface={foundation}
          use="quaternary"
          hint="quaternary"
          trailingActionLabel="Label"
          trailingAction={RtSymbolAction.Info}
          width="full"
        />
      </div>

      <div className={styles['snackbar-container']}>
        <RtSnackbar
          surface={foundation}
          use="error"
          hint="error"
          trailingActionLabel="Label"
          trailingAction={RtSymbolAction.Info}
          width="full"
        />

        <RtSnackbar
          surface={foundation}
          use="warning"
          hint="warning"
          trailingActionLabel="Label"
          trailingAction={RtSymbolAction.Info}
          width="full"
        />

        <RtSnackbar
          surface={foundation}
          use="success"
          hint="success"
          trailingActionLabel="Label"
          trailingAction={RtSymbolAction.Info}
          width="full"
        />

        <RtSnackbar
          surface={foundation}
          use="neutral"
          hint="neutral"
          trailingActionLabel="Label"
          trailingAction={RtSymbolAction.Info}
          width="full"
        />
      </div>

      <div className={styles['snackbar-container']}>
        <RtSnackbar
          surface={foundation}
          use="generic"
          hint="generic"
          trailingActionLabel="Label"
          trailingAction={RtSymbolAction.Info}
          width="full"
        />

        <RtSnackbar
          surface={foundation}
          use="foggy"
          hint="foggy"
          trailingActionLabel="Label"
          trailingAction={RtSymbolAction.Info}
          width="full"
        />

        <RtSnackbar
          surface={foundation}
          use="cloudy"
          hint="cloudy"
          trailingActionLabel="Label"
          trailingAction={RtSymbolAction.Info}
          width="full"
        />

        <RtSnackbar
          surface={foundation}
          use="ashy"
          hint="ashy"
          trailingActionLabel="Label"
          trailingAction={RtSymbolAction.Info}
          width="full"
        />
      </div>

      <div className={styles['snackbar-container']}>
        <RtSnackbar
          surface={foundation}
          use="achromatic-ashy"
          hint="achromatic-ashy"
          trailingActionLabel="Label"
          trailingAction={RtSymbolAction.Info}
          width="full"
        />

        <RtSnackbar
          surface={foundation}
          use="achromatic-cloudy"
          hint="achromatic-cloudy"
          trailingActionLabel="Label"
          trailingAction={RtSymbolAction.Info}
          width="full"
        />
      </div>

      <div className={styles['snackbar-container']}>
        <RtSnackbar
          surface={foundation}
          use="notice"
          hint="notice"
          trailingActionLabel="Label"
          trailingAction={RtSymbolAction.Info}
          width="full"
        />

        <RtSnackbar
          surface={foundation}
          use="positive"
          hint="positive"
          trailingActionLabel="Label"
          trailingAction={RtSymbolAction.Info}
          width="full"
        />

        <RtSnackbar
          surface={foundation}
          use="attention"
          hint="attention"
          trailingActionLabel="Label"
          trailingAction={RtSymbolAction.Info}
          width="full"
        />

        <RtSnackbar
          surface={foundation}
          use="negative"
          hint="negative"
          trailingActionLabel="Label"
          trailingAction={RtSymbolAction.Info}
          width="full"
        />
      </div>
    </RtFrame>
  );
}