import {
  RtFormFieldSelect,
  RtLabelledValue,
  RtOption,
  RtValue,
} from '@dpa/react-form-field-select';
import { RtFrame } from '@dpa/react-frame-intro';
import { RtText } from '@dpa/react-text';
import { useEffect, useMemo, useState } from 'react';

export function FormFieldSelectPage() {
  const [options, setOptions] = useState<RtOption[]>([
    { label: 'Техника', value: 'tech', description: 'asad' },
    { label: 'Одежда', value: 'clothes' },
    { label: 'Спорт', value: 'sport' },
    { label: 'Еда', value: 'food' },
    { label: 'Мебель', value: 'furniture', disabled: true },
    { label: 'Домашние растения', value: 'home-plants' },
    { label: 'Для животных', value: 'for-pats' },
    { label: 'Аптечка', value: 'medicine' },
    { label: 'Другое', value: 'others' },
  ]);
  const [categories, setCategories] = useState<RtValue[]>([
    { label: 'Аптечка', value: 'medicine' },
  ]);
  const [category, setCategory] = useState<RtValue>(null);

  const [filterValue, setFilterValue] = useState('Сп');

  const filtered = useMemo(
    () => options.filter((o) => o.label.includes(filterValue)),
    [options, filterValue]
  );

  function handleFilter(v: string) {
    setFilterValue(v);
  }

  return (
    <RtFrame
      surface="foundation-low-tint"
      use="primary"
      as="div"
      style={{ padding: '4em 8em', height: '100vh' }}
    >
      <RtText typography="headline-sm-bold">RtFormFieldSelect</RtText>
      <div
        style={{
          maxWidth: '50em',
          display: 'flex',
          flexDirection: 'column',
          marginTop: '2em',
          gap: '1em',
        }}
      >
        <RtText as="p" typography="symbol-xs-primary">
          {JSON.stringify(category)}
        </RtText>
        <RtFormFieldSelect
          label="Категория"
          use="neutral"
          size="lg"
          ui="ambulant-label"
          prefix="hey"
          placeholder="Single select"
          options={filtered}
          value={category}
          labelInValue
          isClearable
          filterMode="search"
          filterValue={filterValue}
          autoClearFilterValue={false}
          onChange={(v) => setCategory(v)}
          onFilter={handleFilter}
          dropdownRender={(menu) => (
            <div>
              {menu}
              <RtText
                typography="symbol-sm-medium"
                onClick={() =>
                  setCategory({
                    label: 'новая одежда',
                    value: 'new clothes',
                  })
                }
              >
                выбрать новую одежду
              </RtText>
            </div>
          )}
        />
        <RtText typography="symbol-xs-primary">
          {JSON.stringify(categories)}
        </RtText>
        <RtFormFieldSelect
          label="Категории"
          use="neutral"
          size="lg"
          placeholder="Placeholder"
          ui="ambulant-label"
          prefix="меню="
          suffix="$"
          options={options}
          value={categories}
          filterMode="filter"
          multiple
          labelInValue
          isClearable={false}
          maxTagCount={5}
          maxCount={4}
          autoClearFilterValue
          onChange={(v) => setCategories(v)}
          selectedOptionsRenderFn={(
            option,
            { wrapOption, originPlainTextNode }
          ) => (
            <RtFrame use="error">
              {wrapOption(option, <>! {originPlainTextNode}</>)}
            </RtFrame>
          )}
        />

        <form onSubmit={() => console.log('submit')}>
          <RtFormFieldSelect
            label="Test submit form"
            use="neutral"
            size="lg"
            placeholder="Placeholder"
            ui="ambulant-label"
            options={options}
            value={categories}
            multiple
            labelInValue
            isClearable={false}
            maxTagCount={5}
            maxCount={4}
            autoClearFilterValue
            onChange={(v) => setCategories(v)}
            selectedOptionsRenderFn={(
              option,
              { wrapOption, originPlainTextNode }
            ) => (
              <RtFrame use="error">
                {wrapOption(option, <>! {originPlainTextNode}</>)}
              </RtFrame>
            )}
          />
        </form>
      </div>
    </RtFrame>
  );
}