import { RtText } from '@dpa/react-text';
import { RtChips, RtChipsAction, RtChipsCheckbox } from '@dpa/react-chips';
import { SparkTypographyIcon } from '@dpa/react-typography-icons';
import { ChangeEvent, useState } from 'react';
import { ChipsFilter } from '../../recipes/chips-filter/chips-filter';
import { RecipeBlock } from '../../ui/recipe-block/recipe-block';
import { RecipePage } from '../../ui/recipe-page/recipe-page';

const options = Array.from({
  length: 50,
}).map((_, idx) => ({
  id: idx,
  label: `Бренд ${idx}`,
  groupName: idx > 25 ? 'Группа В' : idx > 10 ? 'Группа Б' : 'Группа А',
  counter: `${Math.floor(Math.random() * 100)}`,
}));

export function ChipsPage() {
  const [state, setState] = useState<string[]>([]);
  const [checked, setChecked] = useState(false);
  const [values, setValues] = useState([2, 3]);

  const Slot = () => {
    return (
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <form
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '8px',
          }}
        >
          <div>
            <input
              type="radio"
              name="radio"
              value="Рекомендации от предмета"
              id="1"
              onChange={handleChange1}
              checked={state[0] === 'Рекомендации от предмета'}
            />
            <RtText typography="symbol-xs-regular" as="label" htmlFor="1">
              Рекомендации от предмета
            </RtText>
          </div>
          <div>
            <input
              type="radio"
              name="radio"
              value="2"
              id="2"
              onChange={handleChange1}
              checked={state[0] === '2'}
            />
            <RtText typography="symbol-xs-regular" as="label" htmlFor="2">
              2
            </RtText>
          </div>
        </form>
        <br />
        <form
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '8px',
          }}
        >
          <div>
            <input
              type="radio"
              name="radio"
              value="[Предмет]"
              id="3"
              onChange={handleChange2}
              checked={state[1] === '[Предмет]'}
            />
            <RtText typography="symbol-xs-regular" as="label" htmlFor="3">
              [Предмет]
            </RtText>
          </div>
          <div>
            <input
              type="radio"
              name="radio"
              value="4"
              id="4"
              onChange={handleChange2}
              checked={state[1] === '4'}
            />
            <RtText typography="symbol-xs-regular" as="label" htmlFor="4">
              4
            </RtText>
          </div>
          <button type="button" onClick={() => setState([])}>
            Отмена
          </button>
        </form>
      </div>
    );
  };

  const handleChange1 = (event: ChangeEvent<HTMLInputElement>) => {
    const nextState = [...state];
    nextState[0] = event.target.value;
    setState(nextState);
  };

  const handleChange2 = (event: ChangeEvent<HTMLInputElement>) => {
    const nextState = [...state];
    nextState[1] = event.target.value;
    setState(nextState);
  };

  return (
    <RecipePage>
      <RecipeBlock label="Rt Chips Filter">
        <ChipsFilter
          options={options}
          value={values}
          onChange={(value) => setValues(value as number[])}
        />
      </RecipeBlock>

      <RecipeBlock label="RtChips">
        <div
          style={{
            display: 'flex',
            gap: '20px',
            flexWrap: 'wrap',
          }}
        >
          <RtChips
            use="primary"
            label="Label"
            size="xs"
            radius="secondary"
            modifier="base"
          />

          <RtChips
            use="primary"
            label="Label"
            size="xs"
            radius="secondary"
            modifier="base"
            disabled
          />

          <RtChips
            use="primary"
            label="Label"
            size="sm"
            radius="secondary"
            modifier="base"
          />

          <RtChips
            use="primary"
            label="Label"
            size="sm"
            radius="secondary"
            modifier="base"
            disabled
          />

          <RtChips
            use="primary"
            label="Label"
            size="md"
            radius="secondary"
            modifier="base"
          />

          <RtChips
            use="primary"
            label="Label"
            size="md"
            radius="secondary"
            modifier="base"
            disabled
          />

          <RtChips
            use="primary"
            label="Label"
            size="lg"
            radius="secondary"
            modifier="base"
          />

          <RtChips
            use="primary"
            label="Label"
            size="lg"
            radius="secondary"
            modifier="base"
            disabled
          />
        </div>

        <div
          style={{
            display: 'flex',
            gap: '20px',
            flexWrap: 'wrap',
          }}
        >
          <RtChips
            use="primary"
            label="Label"
            size="xs"
            radius="primary"
            modifier="base"
          />

          <RtChips
            use="primary"
            label="Label"
            size="xs"
            radius="primary"
            modifier="base"
            disabled
          />

          <RtChips
            use="primary"
            label="Label"
            size="sm"
            radius="primary"
            modifier="base"
          />

          <RtChips
            use="primary"
            label="Label"
            size="sm"
            radius="primary"
            modifier="base"
            disabled
          />

          <RtChips
            use="primary"
            label="Label"
            size="md"
            radius="primary"
            modifier="base"
          />

          <RtChips
            use="primary"
            label="Label"
            size="md"
            radius="primary"
            modifier="base"
            disabled
          />

          <RtChips
            use="primary"
            label="Label"
            size="lg"
            radius="primary"
            modifier="base"
          />

          <RtChips
            use="primary"
            label="Label"
            size="lg"
            radius="primary"
            modifier="base"
            disabled
          />
        </div>

        <div
          style={{
            display: 'flex',
            gap: '20px',
            flexWrap: 'wrap',
          }}
        >
          <RtChips
            use="cloudy"
            label="Label"
            size="xs"
            radius="primary"
            modifier="base"
          />

          <RtChips
            use="cloudy"
            label="Label"
            size="xs"
            radius="primary"
            modifier="base"
            disabled
          />

          <RtChips
            use="cloudy"
            label="Label"
            size="sm"
            radius="primary"
            modifier="base"
          />

          <RtChips
            use="cloudy"
            label="Label"
            size="sm"
            radius="primary"
            modifier="base"
            disabled
          />

          <RtChips
            use="cloudy"
            label="Label"
            size="md"
            radius="primary"
            modifier="base"
          />

          <RtChips
            use="cloudy"
            label="Label"
            size="md"
            radius="primary"
            modifier="base"
            disabled
          />

          <RtChips
            use="cloudy"
            label="Label"
            size="lg"
            radius="primary"
            modifier="base"
          />

          <RtChips
            use="cloudy"
            label="Label"
            size="lg"
            radius="primary"
            modifier="base"
            disabled
          />
        </div>

        <div
          style={{
            display: 'flex',
            gap: '20px',
            flexWrap: 'wrap',
          }}
        >
          <RtChips
            use="error"
            label="Label"
            size="xs"
            radius="primary"
            modifier="base"
          />

          <RtChips
            use="error"
            label="Label"
            size="xs"
            radius="primary"
            modifier="base"
            disabled
          />

          <RtChips
            use="error"
            label="Label"
            size="sm"
            radius="primary"
            modifier="base"
          />

          <RtChips
            use="error"
            label="Label"
            size="sm"
            radius="primary"
            modifier="base"
            disabled
          />

          <RtChips
            use="error"
            label="Label"
            size="md"
            radius="primary"
            modifier="base"
          />

          <RtChips
            use="error"
            label="Label"
            size="md"
            radius="primary"
            modifier="base"
            disabled
          />

          <RtChips
            use="error"
            label="Label"
            size="lg"
            radius="primary"
            modifier="base"
          />

          <RtChips
            use="error"
            label="Label"
            size="lg"
            radius="primary"
            modifier="base"
            disabled
          />
        </div>

        <div
          style={{
            display: 'flex',
            gap: '20px',
            flexWrap: 'wrap',
          }}
        >
          <RtChips
            use="notice"
            label="Label"
            size="xs"
            radius="primary"
            modifier="base"
          />

          <RtChips
            use="notice"
            label="Label"
            size="xs"
            radius="primary"
            modifier="base"
            disabled
          />

          <RtChips
            use="notice"
            label="Label"
            size="sm"
            radius="primary"
            modifier="base"
          />

          <RtChips
            use="notice"
            label="Label"
            size="sm"
            radius="primary"
            modifier="base"
            disabled
          />

          <RtChips
            use="notice"
            label="Label"
            size="md"
            radius="primary"
            modifier="base"
          />

          <RtChips
            use="notice"
            label="Label"
            size="md"
            radius="primary"
            modifier="base"
            disabled
          />

          <RtChips
            use="notice"
            label="Label"
            size="lg"
            radius="primary"
            modifier="base"
          />

          <RtChips
            use="notice"
            label="Label"
            size="lg"
            radius="primary"
            modifier="base"
            disabled
          />
        </div>

        <div
          style={{
            display: 'flex',
            gap: '20px',
            flexWrap: 'wrap',
          }}
        >
          <RtChips
            use="achromatic-cloudy"
            label="Label"
            size="xs"
            radius="primary"
            modifier="base"
          />

          <RtChips
            use="achromatic-cloudy"
            label="Label"
            size="xs"
            radius="primary"
            modifier="base"
            disabled
          />

          <RtChips
            use="achromatic-cloudy"
            label="Label"
            size="sm"
            radius="primary"
            modifier="base"
          />

          <RtChips
            use="achromatic-cloudy"
            label="Label"
            size="sm"
            radius="primary"
            modifier="base"
            disabled
          />

          <RtChips
            use="achromatic-cloudy"
            label="Label"
            size="md"
            radius="primary"
            modifier="base"
          />

          <RtChips
            use="achromatic-cloudy"
            label="Label"
            size="md"
            radius="primary"
            modifier="base"
            disabled
          />

          <RtChips
            use="achromatic-cloudy"
            label="Label"
            size="lg"
            radius="primary"
            modifier="base"
          />

          <RtChips
            use="achromatic-cloudy"
            label="Label"
            size="lg"
            radius="primary"
            modifier="base"
            disabled
          />
        </div>
      </RecipeBlock>

      <RecipeBlock label="RtChipsAction">
        <div
          style={{
            display: 'flex',
            gap: '20px',
            flexWrap: 'wrap',
          }}
        >
          <RtChipsAction
            onRemove={() => setState([])}
            size="xs"
            defaultLabel="Label"
            radius="primary"
            use="primary"
            modifier="base"
            leadingIcon={SparkTypographyIcon}
            labels={state}
            slot={<Slot />}
          />

          <RtChipsAction
            onRemove={() => setState([])}
            size="sm"
            defaultLabel="Label"
            radius="primary"
            use="primary"
            modifier="base"
            leadingIcon={SparkTypographyIcon}
            labels={state}
            slot={<Slot />}
          />

          <RtChipsAction
            onRemove={() => setState([])}
            size="md"
            defaultLabel="Label"
            radius="primary"
            use="primary"
            modifier="base"
            leadingIcon={SparkTypographyIcon}
            labels={state}
            slot={<Slot />}
          />

          <RtChipsAction
            isRemovable
            onRemove={() => setState([])}
            size="lg"
            defaultLabel="Label"
            radius="secondary"
            use="primary"
            modifier="base"
            leadingIcon={SparkTypographyIcon}
            labels={state}
            slot={<Slot />}
          />
        </div>

        <div
          style={{
            display: 'flex',
            gap: '20px',
            flexWrap: 'wrap',
          }}
        >
          <RtChipsAction
            defaultLabel="Label"
            radius="secondary"
            use="secondary"
            modifier="base"
            leadingIcon={SparkTypographyIcon}
            onRemove={() => console.log('remove')}
            slot={<div>slot</div>}
          />

          <RtChipsAction
            defaultLabel="Label"
            use="error"
            slot={<div>slot</div>}
          />

          <RtChipsAction
            defaultLabel="Label"
            use="primary"
            disabled
            slot={<div>slot</div>}
          />
        </div>
      </RecipeBlock>

      <RecipeBlock label="Rt Chips Checkbox">
        <RtText typography="title-md-medium">Rt Chips checkbox</RtText>
        <div
          style={{
            display: 'flex',
            gap: '20px',
            flexWrap: 'wrap',
          }}
        >
          <RtChipsCheckbox
            size="xs"
            radius="primary"
            use="primary"
            modifier="base"
            trailingIcon={SparkTypographyIcon}
            label="Label"
            checked={checked}
            onChange={(value) => setChecked(value)}
          />

          <RtChipsCheckbox
            size="sm"
            radius="primary"
            use="primary"
            modifier="base"
            trailingIcon={SparkTypographyIcon}
            label="Label"
            checked={checked}
            onChange={(value) => setChecked(value)}
          />

          <RtChipsCheckbox
            size="md"
            radius="primary"
            use="primary"
            modifier="base"
            trailingIcon={SparkTypographyIcon}
            label="Label"
            checked={checked}
            onChange={(value) => setChecked(value)}
          />

          <RtChipsCheckbox
            size="lg"
            radius="primary"
            use="primary"
            modifier="base"
            trailingIcon={SparkTypographyIcon}
            label="Label"
            checked={checked}
            onChange={(value) => setChecked(value)}
          />
          <RtChipsCheckbox
            size="lg"
            radius="primary"
            use="primary"
            modifier="base"
            trailingIcon={SparkTypographyIcon}
            label="Label"
            checked={checked}
            onChange={(value) => setChecked(value)}
            disabled
          />
          <RtChipsCheckbox
            size="lg"
            radius="secondary"
            use="primary"
            modifier="base"
            trailingIcon={SparkTypographyIcon}
            label="Label"
            checked={checked}
            onChange={(value) => setChecked(value)}
            disabled
          />
        </div>
      </RecipeBlock>
    </RecipePage>
  );
}