import React from 'react';

import type { OptionType } from '../components/ui';
import { Input, View } from '../components/ui';
import { Checkbox, Radio, Switch } from '../components/ui';

import { Title } from './title';
// import Select from '@/library/select';

const options: OptionType[] = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

export const Inputs = () => {
  const [value, setValue] = React.useState<string | number | undefined>();
  return (
    <View className="flex-1 white">
      {/* <Title text="Form" /> */}
      <View>
        {/* <Input label="Default" placeholder="Lorem ipsum dolor sit amet" /> */}
        {/* <Input label="Error" error="This is a message error" /> */}
        {/* <Input label="Focused" /> */}
        {/* <Select
          label="테스트"
          options={options}
          value={value}
          onSelect={(option) => {
            console.log('option', option);
            setValue(option);
          }}
        /> */}
        {/* 
        <Select
          label="테스트"
          options={options}
          value={value}
          onSelect={(option) => {
            console.log('option', option);
            setValue(option);
          }}
        /> */}

        {/* <CheckboxExample /> */}
        {/* <RadioExample /> */}
        {/* <SwitchExample /> */}
      </View>
    </View>
  );
};

const CheckboxExample = () => {
  const [checked, setChecked] = React.useState(false);
  return (
    <Checkbox.Root
      checked={checked}
      onChange={setChecked}
      accessibilityLabel="accept terms of condition"
      className="pb-2"
    >
      <Checkbox.Icon checked={checked} />
      <Checkbox.Label text="checkbox" />
    </Checkbox.Root>
  );
};

const RadioExample = () => {
  const [selected, setSelected] = React.useState(false);
  return (
    <Radio.Root
      checked={selected}
      onChange={setSelected}
      accessibilityLabel="radio button"
      className="pb-2"
    >
      <Radio.Icon checked={selected} />
      <Radio.Label text="radio button" />
    </Radio.Root>
  );
};

const SwitchExample = () => {
  const [active, setActive] = React.useState(false);
  return (
    <Switch.Root
      checked={active}
      onChange={setActive}
      accessibilityLabel="switch"
      className="pb-2"
    >
      <Switch.Icon checked={active} />
      <Switch.Label text="switch" />
    </Switch.Root>
  );
};