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

export function CheckboxPage() {
  const [val, setVal] = useState(true);

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

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

        <RtText typography="title-md-medium">Size</RtText>
        <div className="row">
          {val}
          <RtCheckbox
            name="test"
            size="sm"
            use="primary"
            isActive={val}
            onChange={onChange}
          />
          {/* <RtCheckbox name='test' size='md' use='primary'/>
          <RtCheckbox name='test' size='lg' use='primary'/>

          <RtCheckbox name='test' size='sm' isActive use='primary'/>
          <RtCheckbox name='test' size='md' isActive use='primary'/>
          <RtCheckbox name='test' size='lg' isActive use='primary'/>

          <RtCheckbox name='test' size='sm' isActive isIntermediate use='primary'/>
          <RtCheckbox name='test' size='md' isActive isIntermediate use='primary'/>
          <RtCheckbox name='test' size='lg' isActive isIntermediate use='primary'/> */}
        </div>

        <RtText typography="title-md-medium">Color</RtText>
        <div className="row">
          <RtCheckbox name="test" size="sm" use="secondary" />
          <RtCheckbox name="test" size="md" use="secondary" />
          <RtCheckbox name="test" size="lg" use="secondary" />

          <RtCheckbox name="test" size="sm" isActive use="secondary" />
          <RtCheckbox name="test" size="md" isActive use="secondary" />
          <RtCheckbox name="test" size="lg" isActive use="secondary" />

          <RtCheckbox
            name="test"
            size="sm"
            isActive
            use="secondary"
            isIntermediate
          />
          <RtCheckbox
            name="test"
            size="md"
            isActive
            use="secondary"
            isIntermediate
          />
          <RtCheckbox
            name="test"
            size="lg"
            isActive
            use="secondary"
            isIntermediate
          />
        </div>
        <div className="row">
          <RtCheckbox name="test" size="sm" use="tertiary" />
          <RtCheckbox name="test" size="md" use="tertiary" />
          <RtCheckbox name="test" size="lg" use="tertiary" />

          <RtCheckbox name="test" size="sm" isActive use="tertiary" />
          <RtCheckbox name="test" size="md" isActive use="tertiary" />
          <RtCheckbox name="test" size="lg" isActive use="tertiary" />

          <RtCheckbox
            name="test"
            size="sm"
            isActive
            use="tertiary"
            isIntermediate
          />
          <RtCheckbox
            name="test"
            size="md"
            isActive
            use="tertiary"
            isIntermediate
          />
          <RtCheckbox
            name="test"
            size="lg"
            isActive
            use="tertiary"
            isIntermediate
          />
        </div>
        <div className="row">
          <RtCheckbox name="test" size="sm" use="error" />
          <RtCheckbox name="test" size="md" use="error" />
          <RtCheckbox name="test" size="lg" use="error" />

          <RtCheckbox name="test" size="sm" isActive use="error" />
          <RtCheckbox name="test" size="md" isActive use="error" />
          <RtCheckbox name="test" size="lg" isActive use="error" />

          <RtCheckbox
            name="test"
            size="sm"
            isActive
            use="error"
            isIntermediate
          />
          <RtCheckbox
            name="test"
            size="md"
            isActive
            use="error"
            isIntermediate
          />
          <RtCheckbox
            name="test"
            size="lg"
            isActive
            use="error"
            isIntermediate
          />
        </div>
        <div className="row">
          <RtCheckbox name="test" size="sm" use="foggy" />
          <RtCheckbox name="test" size="md" use="foggy" />
          <RtCheckbox name="test" size="lg" use="foggy" />

          <RtCheckbox name="test" size="sm" isActive use="foggy" />
          <RtCheckbox name="test" size="md" isActive use="foggy" />
          <RtCheckbox name="test" size="lg" isActive use="foggy" />

          <RtCheckbox
            name="test"
            size="sm"
            isActive
            use="foggy"
            isIntermediate
          />
          <RtCheckbox
            name="test"
            size="md"
            isActive
            use="foggy"
            isIntermediate
          />
          <RtCheckbox
            name="test"
            size="lg"
            isActive
            use="foggy"
            isIntermediate
          />
        </div>

        <RtText typography="title-md-medium">Modifier</RtText>
        <div className="row">
          <RtCheckbox name="test" size="sm" use="primary" modifier="base" />
          <RtCheckbox name="test" size="md" use="primary" modifier="coloring" />
          <RtCheckbox name="test" size="lg" use="primary" modifier="filling" />
          <RtCheckbox name="test" size="lg" use="primary" modifier="mono" />

          <RtCheckbox
            name="test"
            size="sm"
            isActive
            use="primary"
            modifier="base"
          />
          <RtCheckbox
            name="test"
            size="md"
            isActive
            use="primary"
            modifier="coloring"
          />
          <RtCheckbox
            name="test"
            size="lg"
            isActive
            use="primary"
            modifier="filling"
          />
          <RtCheckbox
            name="test"
            size="lg"
            isActive
            use="primary"
            modifier="mono"
          />

          <RtCheckbox
            name="test"
            size="sm"
            isIntermediate
            use="primary"
            modifier="base"
          />
          <RtCheckbox
            name="test"
            size="md"
            isIntermediate
            use="primary"
            modifier="coloring"
          />
          <RtCheckbox
            name="test"
            size="lg"
            isIntermediate
            use="primary"
            modifier="filling"
          />
          <RtCheckbox
            name="test"
            size="lg"
            isIntermediate
            use="primary"
            modifier="mono"
          />
        </div>

        <RtText typography="title-md-medium">Modifier disabled</RtText>
        <div className="row">
          <RtCheckbox
            name="test"
            size="sm"
            use="primary"
            modifier="base"
            disabled
          />
          <RtCheckbox
            name="test"
            size="md"
            use="primary"
            modifier="coloring"
            disabled
          />
          <RtCheckbox
            name="test"
            size="lg"
            use="primary"
            modifier="filling"
            disabled
          />
          <RtCheckbox
            name="test"
            size="lg"
            use="primary"
            modifier="mono"
            disabled
          />

          <RtCheckbox
            name="test"
            size="sm"
            isActive
            use="primary"
            modifier="base"
            disabled
          />
          <RtCheckbox
            name="test"
            size="md"
            isActive
            use="primary"
            modifier="coloring"
            disabled
          />
          <RtCheckbox
            name="test"
            size="lg"
            isActive
            use="primary"
            modifier="filling"
            disabled
          />
          <RtCheckbox
            name="test"
            size="lg"
            isActive
            use="primary"
            modifier="mono"
            disabled
          />

          <RtCheckbox
            name="test"
            size="sm"
            isIntermediate
            use="primary"
            modifier="base"
            disabled
          />
          <RtCheckbox
            name="test"
            size="md"
            isIntermediate
            use="primary"
            modifier="coloring"
            disabled
          />
          <RtCheckbox
            name="test"
            size="lg"
            isIntermediate
            use="primary"
            modifier="filling"
            disabled
          />
          <RtCheckbox
            name="test"
            size="lg"
            isIntermediate
            use="primary"
            modifier="mono"
            disabled
          />
        </div>

        <RtText typography="title-md-medium">Raduis</RtText>
        <div className="row">
          <RtCheckbox name="test" size="sm" use="tertiary" />
          <RtCheckbox name="test" size="md" use="tertiary" />
          <RtCheckbox name="test" size="lg" use="tertiary" />

          <RtCheckbox name="test" size="sm" isActive use="tertiary" />
          <RtCheckbox name="test" size="md" isActive use="tertiary" />
          <RtCheckbox name="test" size="lg" isActive use="tertiary" />

          <RtCheckbox
            name="test"
            size="sm"
            isActive
            use="tertiary"
            isIntermediate
          />
          <RtCheckbox
            name="test"
            size="md"
            isActive
            use="tertiary"
            isIntermediate
          />
          <RtCheckbox
            name="test"
            size="lg"
            isActive
            use="tertiary"
            isIntermediate
          />
        </div>
        <div className="row">
          <RtCheckbox name="test" size="sm" use="tertiary" radius="secondary" />
          <RtCheckbox name="test" size="md" use="tertiary" radius="secondary" />
          <RtCheckbox name="test" size="lg" use="tertiary" radius="secondary" />

          <RtCheckbox
            name="test"
            size="sm"
            isActive
            use="tertiary"
            radius="secondary"
          />
          <RtCheckbox
            name="test"
            size="md"
            isActive
            use="tertiary"
            radius="secondary"
          />
          <RtCheckbox
            name="test"
            size="lg"
            isActive
            use="tertiary"
            radius="secondary"
          />

          <RtCheckbox
            name="test"
            size="sm"
            isActive
            use="tertiary"
            radius="secondary"
            isIntermediate
          />
          <RtCheckbox
            name="test"
            size="md"
            isActive
            use="tertiary"
            radius="secondary"
            isIntermediate
          />
          <RtCheckbox
            name="test"
            size="lg"
            isActive
            use="tertiary"
            radius="secondary"
            isIntermediate
          />
        </div>

        <RtText typography="title-md-medium">Status 'disabled'</RtText>
        <div className="row">
          <RtCheckbox
            name="test"
            size="sm"
            use="tertiary"
            radius="secondary"
            disabled
          />
          <RtCheckbox
            name="test"
            size="md"
            use="tertiary"
            radius="secondary"
            disabled
          />
          <RtCheckbox
            name="test"
            size="lg"
            use="tertiary"
            radius="secondary"
            disabled
          />

          <RtCheckbox
            name="test"
            size="sm"
            isActive
            use="tertiary"
            radius="secondary"
            disabled
          />
          <RtCheckbox
            name="test"
            size="md"
            isActive
            use="tertiary"
            radius="secondary"
            disabled
          />
          <RtCheckbox
            name="test"
            size="lg"
            isActive
            use="tertiary"
            radius="secondary"
            disabled
          />

          <RtCheckbox
            name="test"
            size="sm"
            isActive
            use="tertiary"
            radius="secondary"
            isIntermediate
            disabled
          />
          <RtCheckbox
            name="test"
            size="md"
            isActive
            use="tertiary"
            radius="secondary"
            isIntermediate
            disabled
          />
          <RtCheckbox
            name="test"
            size="lg"
            isActive
            use="tertiary"
            radius="secondary"
            isIntermediate
            disabled
          />
        </div>
        <div className="row">
          <RtCheckbox
            name="test"
            size="sm"
            use="error"
            radius="secondary"
            disabled
          />
          <RtCheckbox
            name="test"
            size="md"
            use="error"
            radius="secondary"
            disabled
          />
          <RtCheckbox
            name="test"
            size="lg"
            use="error"
            radius="secondary"
            disabled
          />

          <RtCheckbox
            name="test"
            size="sm"
            isActive
            use="error"
            radius="secondary"
            disabled
          />
          <RtCheckbox
            name="test"
            size="md"
            isActive
            use="error"
            radius="secondary"
            disabled
          />
          <RtCheckbox
            name="test"
            size="lg"
            isActive
            use="error"
            radius="secondary"
            disabled
          />

          <RtCheckbox
            name="test"
            size="sm"
            isActive
            use="error"
            radius="secondary"
            isIntermediate
            disabled
          />
          <RtCheckbox
            name="test"
            size="md"
            isActive
            use="error"
            radius="secondary"
            isIntermediate
            disabled
          />
          <RtCheckbox
            name="test"
            size="lg"
            isActive
            use="error"
            radius="secondary"
            isIntermediate
            disabled
          />
        </div>
        <div className="row">
          <RtCheckbox name="test" size="sm" use="primary" disabled />
          <RtCheckbox name="test" size="md" use="primary" disabled />
          <RtCheckbox name="test" size="lg" use="primary" disabled />

          <RtCheckbox name="test" size="sm" isActive use="primary" disabled />
          <RtCheckbox name="test" size="md" isActive use="primary" disabled />
          <RtCheckbox name="test" size="lg" isActive use="primary" disabled />

          <RtCheckbox
            name="test"
            size="sm"
            isActive
            use="primary"
            isIntermediate
            disabled
          />
          <RtCheckbox
            name="test"
            size="md"
            isActive
            use="primary"
            isIntermediate
            disabled
          />
          <RtCheckbox
            name="test"
            size="lg"
            isActive
            use="primary"
            isIntermediate
            disabled
          />
        </div>
        <div className="row">
          <RtCheckbox name="test" size="sm" use="foggy" disabled />
          <RtCheckbox name="test" size="md" use="foggy" disabled />
          <RtCheckbox name="test" size="lg" use="foggy" disabled />

          <RtCheckbox name="test" size="sm" isActive use="foggy" disabled />
          <RtCheckbox name="test" size="md" isActive use="foggy" disabled />
          <RtCheckbox name="test" size="lg" isActive use="foggy" disabled />

          <RtCheckbox
            name="test"
            size="sm"
            isActive
            use="foggy"
            isIntermediate
            disabled
          />
          <RtCheckbox
            name="test"
            size="md"
            isActive
            use="foggy"
            isIntermediate
            disabled
          />
          <RtCheckbox
            name="test"
            size="lg"
            isActive
            use="foggy"
            isIntermediate
            disabled
          />
        </div>

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

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

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

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

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

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