import { RtFrame } from '@dpa/react-frame-intro';
import { RtText } from '@dpa/react-text';
import { RtRadio } from '@dpa/react-radio';
import './style.css';
import { useState } from 'react';

export function RadioPage() {
  const [isActive, setIsActive] = useState(false);

  function onChange(e) {
    setIsActive(e.value);
  }

  return (
    <RtFrame
      as="div"
      surface="foundation-tint"
      use="ashy"
      modifier="base"
      style={{
        minHeight: '100vh',
        padding: '40px',
      }}
    >
      <RtFrame
        as="div"
        use="cloudy"
        surface="foundation-pure"
        modifier="base"
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '20px',
          borderRadius: '10px',
          padding: '12px',
        }}
      >
        <RtText typography="title-lg-medium">Radio</RtText>

        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
            padding: '12px',
          }}
        >
          <RtRadio
            name="test"
            use="primary"
            size="sm"
            isActive={isActive}
            onChange={onChange}
          />
          <RtRadio name="test" use="primary" size="md" />
          <RtRadio name="test" use="primary" size="lg" />
          <RtRadio name="test" use="primary" size="sm" isActive />
          <RtRadio name="test" use="primary" size="md" isActive />
          <RtRadio name="test" use="primary" size="lg" isActive />
          <RtRadio name="test" use="primary" size="sm" disabled />
          <RtRadio name="test" use="primary" size="md" disabled />
          <RtRadio name="test" use="primary" size="lg" disabled />
          <RtRadio name="test" use="primary" size="sm" isActive disabled />
          <RtRadio name="test" use="primary" size="md" isActive disabled />
          <RtRadio name="test" use="primary" size="lg" isActive disabled />
        </div>

        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
            padding: '12px',
          }}
        >
          <RtRadio name="test" use="foggy" size="sm" />
          <RtRadio name="test" use="foggy" size="md" />
          <RtRadio name="test" use="foggy" size="lg" />
          <RtRadio name="test" use="foggy" size="sm" isActive />
          <RtRadio name="test" use="foggy" size="md" isActive />
          <RtRadio name="test" use="foggy" size="lg" isActive />
          <RtRadio name="test" use="foggy" size="sm" disabled />
          <RtRadio name="test" use="foggy" size="md" disabled />
          <RtRadio name="test" use="foggy" size="lg" disabled />
          <RtRadio name="test" use="foggy" size="sm" isActive disabled />
          <RtRadio name="test" use="foggy" size="md" isActive disabled />
          <RtRadio name="test" use="foggy" size="lg" isActive disabled />
        </div>

        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
            padding: '12px',
          }}
        >
          <RtRadio name="test" use="success" size="sm" />
          <RtRadio name="test" use="success" size="md" />
          <RtRadio name="test" use="success" size="lg" />
          <RtRadio name="test" use="success" size="sm" isActive />
          <RtRadio name="test" use="success" size="md" isActive />
          <RtRadio name="test" use="success" size="lg" isActive />
          <RtRadio name="test" use="success" size="sm" disabled />
          <RtRadio name="test" use="success" size="md" disabled />
          <RtRadio name="test" use="success" size="lg" disabled />
          <RtRadio name="test" use="success" size="sm" isActive disabled />
          <RtRadio name="test" use="success" size="md" isActive disabled />
          <RtRadio name="test" use="success" size="lg" isActive disabled />
        </div>

        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
            padding: '12px',
          }}
        >
          <RtRadio name="test" use="error" size="sm" />
          <RtRadio name="test" use="error" size="md" />
          <RtRadio name="test" use="error" size="lg" />
          <RtRadio name="test" use="error" size="sm" isActive />
          <RtRadio name="test" use="error" size="md" isActive />
          <RtRadio name="test" use="error" size="lg" isActive />
          <RtRadio name="test" use="error" size="sm" disabled />
          <RtRadio name="test" use="error" size="md" disabled />
          <RtRadio name="test" use="error" size="lg" disabled />
          <RtRadio name="test" use="error" size="sm" isActive disabled />
          <RtRadio name="test" use="error" size="md" isActive disabled />
          <RtRadio name="test" use="error" size="lg" isActive disabled />
        </div>

        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
            padding: '12px',
          }}
        >
          <RtRadio name="test" use="warning" size="sm" />
          <RtRadio name="test" use="warning" size="md" />
          <RtRadio name="test" use="warning" size="lg" />
          <RtRadio name="test" use="warning" size="sm" isActive />
          <RtRadio name="test" use="warning" size="md" isActive />
          <RtRadio name="test" use="warning" size="lg" isActive />
          <RtRadio name="test" use="warning" size="sm" disabled />
          <RtRadio name="test" use="warning" size="md" disabled />
          <RtRadio name="test" use="warning" size="lg" disabled />
          <RtRadio name="test" use="warning" size="sm" isActive disabled />
          <RtRadio name="test" use="warning" size="md" isActive disabled />
          <RtRadio name="test" use="warning" size="lg" isActive disabled />
        </div>

        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
            padding: '12px',
          }}
        >
          <RtRadio name="test" use="positive" size="sm" />
          <RtRadio name="test" use="positive" size="md" />
          <RtRadio name="test" use="positive" size="lg" />
          <RtRadio name="test" use="positive" size="sm" isActive />
          <RtRadio name="test" use="positive" size="md" isActive />
          <RtRadio name="test" use="positive" size="lg" isActive />
          <RtRadio name="test" use="positive" size="sm" disabled />
          <RtRadio name="test" use="positive" size="md" disabled />
          <RtRadio name="test" use="positive" size="lg" disabled />
          <RtRadio name="test" use="positive" size="sm" isActive disabled />
          <RtRadio name="test" use="positive" size="md" isActive disabled />
          <RtRadio name="test" use="positive" size="lg" isActive disabled />
        </div>

        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
            padding: '12px',
          }}
        >
          <RtRadio name="test" use="attention" size="sm" />
          <RtRadio name="test" use="attention" size="md" />
          <RtRadio name="test" use="attention" size="lg" />
          <RtRadio name="test" use="attention" size="sm" isActive />
          <RtRadio name="test" use="attention" size="md" isActive />
          <RtRadio name="test" use="attention" size="lg" isActive />
          <RtRadio name="test" use="attention" size="sm" disabled />
          <RtRadio name="test" use="attention" size="md" disabled />
          <RtRadio name="test" use="attention" size="lg" disabled />
          <RtRadio name="test" use="attention" size="sm" isActive disabled />
          <RtRadio name="test" use="attention" size="md" isActive disabled />
          <RtRadio name="test" use="attention" size="lg" isActive disabled />
        </div>

        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '20px',
            borderRadius: '10px',
            padding: '12px',
          }}
        >
          <RtRadio name="test" use="negative" size="sm" />
          <RtRadio name="test" use="negative" size="md" />
          <RtRadio name="test" use="negative" size="lg" />
          <RtRadio name="test" use="negative" size="sm" isActive />
          <RtRadio name="test" use="negative" size="md" isActive />
          <RtRadio name="test" use="negative" size="lg" isActive />
          <RtRadio name="test" use="negative" size="sm" disabled />
          <RtRadio name="test" use="negative" size="md" disabled />
          <RtRadio name="test" use="negative" size="lg" disabled />
          <RtRadio name="test" use="negative" size="sm" isActive disabled />
          <RtRadio name="test" use="negative" size="md" isActive disabled />
          <RtRadio name="test" use="negative" size="lg" isActive disabled />
        </div>

        <RtText typography="title-md-medium">Container Size</RtText>
        <div className="row">
          <div className="container">
            <RtRadio name="test" size="md" use="primary" />
          </div>
          <div className="container">
            <RtRadio name="test" size="md" use="primary" width="xs" />
          </div>
          <div className="container">
            <RtRadio name="test" size="md" use="primary" width="sm" />
          </div>
          <div className="container">
            <RtRadio name="test" size="md" use="primary" width="md" />
          </div>
          <div className="container">
            <RtRadio name="test" size="md" use="primary" width="lg" />
          </div>
          <div className="container">
            <RtRadio name="test" size="md" use="primary" width="xl" />
          </div>
        </div>

        <div className="row">
          <div className="container">
            <RtRadio name="test" size="md" use="primary" height="xs" />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="xs"
              height="xs"
            />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="sm"
              height="xs"
            />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="md"
              height="xs"
            />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="lg"
              height="xs"
            />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="xl"
              height="xs"
            />
          </div>
        </div>

        <div className="row">
          <div className="container">
            <RtRadio name="test" size="md" use="primary" height="sm" />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="xs"
              height="sm"
            />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="sm"
              height="sm"
            />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="md"
              height="sm"
            />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="lg"
              height="sm"
            />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="xl"
              height="sm"
            />
          </div>
        </div>

        <div className="row">
          <div className="container">
            <RtRadio name="test" size="md" use="primary" height="md" />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="xs"
              height="md"
            />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="sm"
              height="md"
            />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="md"
              height="md"
            />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="lg"
              height="md"
            />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="xl"
              height="md"
            />
          </div>
        </div>

        <div className="row">
          <div className="container">
            <RtRadio name="test" size="md" use="primary" height="lg" />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="xs"
              height="lg"
            />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="sm"
              height="lg"
            />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="md"
              height="lg"
            />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="lg"
              height="lg"
            />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="xl"
              height="lg"
            />
          </div>
        </div>

        <div className="row">
          <div className="container">
            <RtRadio name="test" size="md" use="primary" height="xl" />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="xs"
              height="xl"
            />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="sm"
              height="xl"
            />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="md"
              height="xl"
            />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="lg"
              height="xl"
            />
          </div>
          <div className="container">
            <RtRadio
              name="test"
              size="md"
              use="primary"
              width="xl"
              height="xl"
            />
          </div>
        </div>
      </RtFrame>
    </RtFrame>
  );
}