import { RtButton } from '@dpa/react-buttons';
import { RtFrame } from '@dpa/react-frame-intro';
import { RtSegmentControl } from '@dpa/react-segment-control';
import { SparkTypographyIcon } from '@dpa/react-typography-icons';
import { useMemo, useState } from 'react';

const data1 = [
  { id: 'id-2-1', text: 'tab 1', counter: 1, disabled: false },
  { id: 'id-2-2', text: 'Длинный таб', disabled: false },
  { id: 'id-2-3', text: 'tab 3', disabled: true },
];

const dataWithIcons = [
  {
    id: 'id-1-1',
    icon: SparkTypographyIcon,
  },
  { id: 'id-1-2', icon: SparkTypographyIcon },
  { id: 'id-1-3', icon: SparkTypographyIcon, disabled: true },
];

export const SegmentControlPage = () => {
  const [disabled, setDisabled] = useState(false);

  const [activeId, setActiveId] = useState('id-2-1');

  const data2 = useMemo(() => {
    if (disabled) {
      return [
        { id: 'id-1-1', text: 'tab 1 tab 1 tab 1 tab 1 tab 1 ', counter: 1 },
        { id: 'id-1-2', text: 'Длинный таб' },
      ];
    }
    return [
      { id: 'id-1-1', text: 'tab 1', counter: 1 },
      { id: 'id-1-2', text: 'Длинный таб' },
      { id: 'id-1-3', text: 'tab 3', disabled: false },
    ];
  }, [disabled]);

  return (
    <div>
      <RtFrame
        use="primary"
        surface="foundation-pure"
        style={{ width: disabled ? 400 : 1000 }}
      >
        <RtSegmentControl
          segments={data2}
          size="sm"
          direction="horizontal"
          radius="primary"
          grow={true}
          activeUse="achromatic-ashy"
          modifier="filling"
          bgTransparent
        />
      </RtFrame>
      <div onClick={() => setDisabled((s) => !s)}>----grow----</div>
      <RtButton
        use="primary"
        label="id-2-2"
        subLabel={activeId}
        onClick={() => setActiveId('id-2-2')}
      ></RtButton>
      <div style={{ width: 600 }}>
        <RtSegmentControl
          use="cloudy"
          activeUse="ashy"
          childUse="ashy"
          segments={data1}
          size="sm"
          direction="horizontal"
          radius="primary"
          activeId={activeId}
          isResettable
        />
      </div>
      <div>--------</div>
      <RtSegmentControl
        use="quaternary"
        activeUse="quaternary"
        childUse="ashy"
        segments={dataWithIcons}
        size="sm"
        direction="horizontal"
        radius="primary"
        activeId="id-2-1"
      />
      <RtSegmentControl
        use="error"
        activeUse="error"
        childUse="ashy"
        segments={data2}
        size="sm"
        direction="horizontal"
        radius="primary"
        activeId="id-2-1"
      />
      <div>--------</div>
      <RtSegmentControl
        use="attention"
        activeUse="attention"
        childUse="ashy"
        segments={data1}
        size="sm"
        direction="horizontal"
        radius="secondary"
      />
      <div>--------</div>
      <RtSegmentControl
        use="cloudy"
        activeUse="notice"
        childUse="ashy"
        segments={data1}
        size="md"
        direction="horizontal"
        radius="primary"
      />
      <div>--------</div>
      <RtSegmentControl
        use="foggy"
        activeUse="foggy"
        childUse="ashy"
        segments={data1}
        size="md"
        direction="horizontal"
        radius="secondary"
      />
      <RtSegmentControl
        use="foggy"
        activeUse="foggy"
        childUse="ashy"
        segments={data1}
        size="lg"
        direction="horizontal"
        radius="secondary"
      />
      <div>--------</div>
      <RtSegmentControl
        use="ashy"
        activeUse="ashy"
        childUse="ashy"
        segments={data1}
        size="lg"
        direction="vertical"
        radius="primary"
      />
      <RtSegmentControl
        use="ashy"
        activeUse="ashy"
        childUse="ashy"
        segments={dataWithIcons}
        size="lg"
        direction="vertical"
        radius="secondary"
      />
      <div>--------</div>
    </div>
  );
};