import { Center, Group, Divider, Title } from '@tidbcloud/uikit'
import {
  Form,
  FormTextInput,
  FormPasswordInput,
  FormSegmentedControl,
  FormSelect,
  FormProMultiSelect,
  FormNumberInput,
  FormRatingInput,
  FormSwitch,
  FormTextareaInput,
  FormCopyText,
  FormRadioGroup,
  FormCheckboxGroup,
  FormCheckbox
} from '@tidbcloud/uikit/biz'
import { IconAtom01, IconLock01 } from '@tidbcloud/uikit/icons'

export const FormExample = () => {
  return (
    <div>
      <Title order={2}>Form Examples</Title>
      <Center w={600} m="0 auto" p="sm">
        <Form
          w={'100%'}
          formMode="onChange"
          layoutProps={{ gap: 'xs' }}
          onSubmit={(data) => {
            console.log(data)
            throw new Error('Test error')
          }}
          withActions
          layout="vertical"
          actionsProps={{
            loading: false,
            disabled: false,
            onCancel: () => {},
            onConfirm: () => {},
            cancelText: 'Cancel',
            confirmText: 'Confirm',
            cancelProps: {},
            confirmProps: {}
          }}
          errorMessageProps={{
            onDismiss: () => {},
            autoScroll: false,
            closable: true
          }}
          stopPropagation={false}
          preventDefault={false}
          defaultValues={{}}
          reValidateMode="onChange"
        >
          <p>
            Form component base on{' '}
            <a
              href="https://react-hook-form.com/docs"
              target="_blank"
              rel="noreferrer"
            >
              react-hook-form
            </a>
            .
          </p>
          <Group grow align="flex-start">
            <FormTextInput
              name="first_name"
              rules={{ minLength: { value: 10, message: 'min length is 10' } }}
              placeholder="Your first name"
              label="First name"
            />
            <FormTextInput
              name="last_name"
              placeholder="Your last name"
              label="Last name"
            />
          </Group>
          <FormTextInput
            name="email"
            mt="md"
            placeholder="Your email"
            label="Email"
            leftSection={<IconAtom01 size={16} stroke="1.5" />}
          />
          <FormTextInput
            name="url"
            mt="md"
            placeholder="Your url"
            label="url"
            leftAddon="https://www.test.com"
            rules={{ required: 'Required' }}
          />
          <FormTextInput
            name="speed"
            mt="md"
            placeholder="Input speed"
            label="Speed"
            rightAddon="MiB/s"
            rules={{ required: 'Required' }}
          />
          <FormTextInput
            name="domain"
            mt="md"
            placeholder="Your domain"
            label="url"
            leftAddon="https://www."
            rightAddon=".com"
            rules={{ required: 'Required' }}
          />
          <FormPasswordInput
            name="password"
            mt="md"
            placeholder="Password"
            label="Password"
            rules={{ minLength: { value: 8, message: 'min length is 8' } }}
            leftSection={<IconLock01 size={16} stroke="1.5" />}
          />
          <FormSegmentedControl
            name="option"
            mt="md"
            data={[
              { value: 'react', label: 'React' },
              { value: 'vue', label: 'Vue' }
            ]}
          />
          <FormSelect
            name="framework"
            data={[
              { label: 'React', value: 'react' },
              { label: 'Vue', value: 'vue' }
            ]}
            label="Framework"
            placeholder="Select Framework"
            rules={{ required: 'Required' }}
          />
          <FormProMultiSelect
            name="framework2"
            placeholder="Select Multiple Framework"
            data={[
              { label: 'React', value: 'react' },
              { label: 'Vue', value: 'vue' },
              { label: 'Angular', value: 'angular' },
              { label: 'Svelte', value: 'svelte' },
              { label: 'React Native', value: 'react-native' },
              { label: 'Flutter', value: 'flutter' },
              { label: 'Ionic', value: 'ionic' },
              { label: 'Cordova', value: 'cordova' },
              { label: 'PhoneGap', value: 'phonegap' },
              { label: 'NativeScript', value: 'nativescript' },
              { label: 'Quasar', value: 'quasar' },
              { label: 'Vuetify', value: 'vuetify' },
              { label: 'BootstrapVue', value: 'bootstrap-vue' },
              { label: 'Materialize', value: 'materialize' },
              { label: 'Bulma', value: 'bulma' },
              { label: 'Chakra UI', value: 'chakra-ui' },
              { label: 'Ant Design', value: 'ant-design' },
              { label: 'Material-UI', value: 'material-ui' },
              { label: 'Grommet', value: 'grommet' },
              { label: 'Evergreen', value: 'evergreen' },
              { label: 'Rebass', value: 'rebass' },
              { label: 'Theme UI', value: 'theme-ui' },
              { label: 'Tailwind CSS', value: 'tailwind-css' }
            ]}
            clearable
            label="ProMultiSelect"
            rules={{ required: 'Required' }}
          />
          <FormNumberInput
            name="amount"
            label="Amount"
            placeholder="Your amount"
          />
          <FormRatingInput name="rating" label="Rating" />
          <FormSwitch name="Checked" label="Checked" />
          <FormTextareaInput
            name="message"
            label="Messasge"
            placeholder="Your message"
            minRows={2}
          />
          <FormCopyText value={'This is an example'} />
          <FormRadioGroup
            name="radio"
            data={[
              { label: 'React', value: 'react' },
              { label: 'Vue', value: 'vue' },
              { label: 'Angular', value: 'angular' },
              {
                label: 'Svelte',
                value: 'svelte',
                disabled: true,
                tooltip:
                  'Svelte is a JavaScript framework for building user interfaces.',
                tooltipProps: {
                  useTooltip: true
                }
              }
            ]}
            label="Your favorite framework"
          />
          <FormCheckboxGroup
            name="checkboxGroup1"
            data={[
              { label: 'React', value: 'react' },
              { label: 'Vue', value: 'vue' },
              { label: 'Angular', value: 'angular' },
              { label: 'Svelte', value: 'svelte' }
            ]}
            label="Your favorite framework"
            direction="column"
          />

          <FormCheckboxGroup
            name="checkboxGroup2"
            data={[
              { label: 'React', value: 'react' },
              { label: 'Vue', value: 'vue' },
              { label: 'Angular', value: 'angular' },
              { label: 'Svelte', value: 'svelte' }
            ]}
            label="Your favorite framework"
            direction="row"
          />

          <Divider />

          <FormCheckbox
            name="checkbox"
            label="I agree to the terms and conditions"
          />
        </Form>
      </Center>
    </div>
  )
}