import { useState, useRef } from 'react';
import { RtFrame } from '@dpa/react-frame-intro';
import { RtItem, RtList, RtListItem, RtListVirtual } from '@dpa/react-item';
import { RtText } from '@dpa/react-text';
import { RtChips } from '@dpa/react-chips';
import { RtToggle } from '@dpa/react-toggle';
import { RtCheckbox } from '@dpa/react-checkbox';
import { RtRadio } from '@dpa/react-radio';

const ITEMS: RtListItem[] = Array.from({
  length: 50,
}).map((_, index) => {
  if ((index + 1) % 5 === 0) {
    return {
      id: `item-${index + 1}`,
      slot: (
        <div style={{ margin: '10px 0' }}>
          <RtChips
            label={`Chip ${index + 1}`}
            use="primary"
            onClick={() => console.log('text slot click')}
          />
        </div>
      ),
      use: 'neutral',
      label: '',
    };
  }
  return {
    id: `${index + 1}`,
    label: `Item ${index + 1}`,
    subLabel: `Item ${index + 1}`,
    use: 'neutral',
  };
});

const values = ['car', 'phone', 'clothes', 'food', 'other'];

export const ListPage = () => {
  const [val, setVal] = useState(['phone']);
  const [radioValue, setRadioValue] = useState('phone');
  const [isReadOnly, setIsReadOnly] = useState(false);
  const [items, setItems] = useState<RtListItem[]>([
    { id: '1', use: 'neutral', label: '🍎 Apple', subLabel: '🍎 Apple' },
    { id: '2', use: 'neutral', label: '🍌 Banana', subLabel: '🍌 Banana' },
    { id: '3', use: 'neutral', label: '🍇 Grape', subLabel: '🍇 Grape' },
  ]);

  const virtualContainerRef = useRef<HTMLDivElement>(null);

  return (
    <div>
      <RtFrame
        as="div"
        surface="foundation-low-tint"
        use="neutral"
        style={{
          minHeight: '100vh',
          padding: '40px',
          display: 'flex',
          flexDirection: 'column',
          gap: '20px',
        }}
      >
        <RtFrame
          as="div"
          surface="foundation-pure"
          use="cloudy"
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '20px',
            borderRadius: '10px',
            padding: '24px',
          }}
        >
          <RtText typography="title-md-medium">Rt List DnD</RtText>
          <div style={{ display: 'flex', gap: '20px' }}>
            <RtText typography="title-sm-medium">Edit mode</RtText>
            <RtToggle
              isActive={isReadOnly}
              onClick={() => setIsReadOnly(!isReadOnly)}
              name="Mode"
            />
          </div>

          <RtList
            useGrid
            use="neutral"
            items={items}
            getId={(item) => item.id}
            onReorder={setItems}
            renderItem={(item) => {
              return (
                <RtItem
                  id={item.id}
                  key={item.id}
                  use="neutral"
                  label={item.label}
                  variant="normal"
                  size="lg"
                  trailingActionLabel="Action"
                  onClick={() => console.log('action click', item.id)}
                  actionVariant="clear"
                  actionState="dragging"
                  readOnly={isReadOnly}
                  onClear={() => {
                    setItems((items) =>
                      items.filter((fruit) => fruit.id !== item.id)
                    );
                  }}
                />
              );
            }}
          />
        </RtFrame>

        <RtFrame
          as="div"
          surface="foundation-pure"
          use="cloudy"
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '20px',
            borderRadius: '10px',
            padding: '24px',
          }}
        >
          <RtText typography="title-md-medium">Rt List virtual</RtText>

          <div
            ref={virtualContainerRef}
            style={{
              height: 400,
              overflow: 'auto',
              contain: 'strict',
              maxWidth: 300,
              outline: 'dashed red 1px',
            }}
          >
            <RtListVirtual
              ariaLabel="Список"
              useGrid
              use="neutral"
              items={ITEMS}
              getId={(item) => item.id}
              renderItem={(item: RtListItem) => {
                if ('slot' in item) {
                  return item.slot;
                }

                return (
                  <RtItem
                    key={item.id}
                    use="neutral"
                    label={item.label}
                    variant="normal"
                    size="lg"
                    trailingActionLabel="Action"
                    onClick={() => console.log('action click', item.id)}
                    actionVariant="clear"
                    actionState="dragging"
                  />
                );
              }}
              containerRef={virtualContainerRef}
            />
          </div>
        </RtFrame>

        <RtFrame
          surface="foundation-pure"
          use="cloudy"
          style={{
            padding: '24px',
            borderRadius: '20px',
            display: 'flex',
            flexDirection: 'column',
            gap: '12px',
          }}
        >
          <RtText typography="title-md-medium">RtList Checkbox</RtText>

          <RtList
            ariaLabel="Список"
            items={values.map((i) => ({ id: i, label: i } as RtListItem))}
            renderItem={(item) => {
              return (
                <RtItem
                  id={item.id}
                  key={item.id}
                  use="neutral"
                  label={item.label}
                  variant="normal"
                  size="lg"
                  trailingActionLabel="Action"
                  onClick={() => console.log('action click', item.id)}
                  leadingSlot={
                    <RtCheckbox
                      use="success"
                      width="lg"
                      isActive={val.includes(item.id)}
                      onChange={() =>
                        setVal((oldV) => {
                          if (oldV.includes(item.id))
                            return oldV.filter((i) => i !== item.id);
                          return [...oldV, item.id];
                        })
                      }
                    />
                  }
                />
              );
            }}
          />
        </RtFrame>

        <RtFrame
          surface="foundation-pure"
          use="cloudy"
          style={{
            padding: '24px',
            borderRadius: '20px',
            display: 'flex',
            flexDirection: 'column',
            gap: '12px',
          }}
        >
          <RtText typography="title-md-medium">RtList Toggle</RtText>

          <RtList
            ariaLabel="Список"
            items={values.map((i) => ({ id: i, label: i } as RtListItem))}
            renderItem={(item) => {
              return (
                <RtItem
                  id={item.id}
                  key={item.id}
                  use="neutral"
                  label={item.label}
                  variant="normal"
                  size="lg"
                  trailingActionLabel="Action"
                  onClick={() => console.log('action click', item.id)}
                  leadingSlot={
                    <RtToggle
                      width="lg"
                      isActive={val.includes(item.id)}
                      onChange={() =>
                        setVal((oldV) => {
                          if (oldV.includes(item.id))
                            return oldV.filter((i) => i !== item.id);
                          return [...oldV, item.id];
                        })
                      }
                    />
                  }
                />
              );
            }}
          />
        </RtFrame>

        <RtFrame
          surface="foundation-pure"
          use="cloudy"
          style={{
            padding: '24px',
            borderRadius: '20px',
            display: 'flex',
            flexDirection: 'column',
            gap: '12px',
          }}
        >
          <RtText typography="title-md-medium">RtList Radio</RtText>

          <RtList
            ariaLabel="Список"
            items={values.map((i) => ({ id: i, label: i } as RtListItem))}
            renderItem={(item) => {
              return (
                <RtItem
                  id={item.id}
                  key={item.id}
                  use="neutral"
                  label={item.label}
                  variant="normal"
                  size="lg"
                  trailingActionLabel="Action"
                  onClick={() => console.log('action click', item.id)}
                  leadingSlot={
                    <RtRadio
                      use="success"
                      width="lg"
                      isActive={radioValue === item.id}
                      onChange={() => setRadioValue(item.id)}
                    />
                  }
                />
              );
            }}
          />
        </RtFrame>
      </RtFrame>
    </div>
  );
};