import { RtFrame, RtUse } from '@dpa/react-frame-intro';
import { RtToggle, RtToggleProps } from '@dpa/react-toggle';
import { useState } from 'react';

function ToggleGroup({
  uses,
  radius,
  timeout,
}: {
  uses: RtUse[];
  radius: RtToggleProps['radius'];
  timeout?: boolean;
}) {
  const [isActive, setIsActive] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const handleChange: RtToggleProps['onChange'] = ({ value }) => {
    console.log('value', value);

    setIsLoading(true);
    setTimeout(
      () => {
        setIsLoading(false);
        setIsActive(value);
      },
      timeout ? 250 : 0
    );
  };

  return (
    <div
      style={{
        padding: '20px',
        display: 'flex',
        flexDirection: 'column',
        gap: '10px',
      }}
    >
      {uses.map((use) => (
        <RtToggle
          key={use}
          activeUse={use}
          radius={radius}
          isActive={isActive}
          isLoading={isLoading}
          size="sm"
          width="lg"
          height="lg"
          onChange={handleChange}
        />
      ))}
    </div>
  );
}

export function TogglePage() {
  return (
    <RtFrame
      as="div"
      surface="foundation-tint"
      use="success"
      style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr' }}
    >
      <ToggleGroup
        uses={['primary', 'secondary', 'tertiary', 'quaternary']}
        radius="primary"
        timeout
      />
      <ToggleGroup
        uses={['success', 'warning', 'error', 'neutral']}
        radius="secondary"
      />
      <ToggleGroup
        uses={['success', 'warning', 'error', 'neutral']}
        radius="primary"
      />
      <ToggleGroup
        uses={['positive', 'negative', 'attention', 'notice']}
        radius="secondary"
      />
      <ToggleGroup uses={['generic', 'cloudy', 'foggy']} radius="primary" />
      <ToggleGroup
        uses={['achromatic-ashy', 'achromatic-cloudy']}
        radius="secondary"
      />
    </RtFrame>
  );
}