import RenderForm from '@/components/RenderForm/RenderForm';
import { Button, Group, Radio } from '@mantine/core';
import { useForm } from '@mantine/form';

export const PageWelcome = () => {

  // Data from BE
  const response = {
    status: true, // Status of response
    column: 3, // Number of column in form layout 

    // Data of form
    data: {
      colorinput: '#2e2e2e',
      fileinput: 'sdfsdfs',
      input: 'Input value',
      jsoninput: `{
        abc: 123,
        def: 234
      }`,
      numberinput: '1000000',
      passwordinput: 'fhsdjkg',
      textarea: `While this approach works, keep in mind that using a CSS-in-JS library like
      Styled Components provides a more maintainable and scalable solution, especially
      as your project grows. The above example is provided for cases where using plain JavaScript`,
      textinput: 'Text input value',
      multiselect: ['one', 'two'],
      select: '1',
      tagsinput: ['tag1', 'tag2'],
      datetimepicker: new Date(),
      dateinput: new Date(),
      pininput: '5173',
      radio: true,
      rating: 4,
      switch: true,
      radiogroup: '1',
      checkbox: true,
      chip: true

    },

    // Format input
    format: [
      {
        key: "colorinput", // Name of input
        name: "ColorInput", // Label of input
        type: "ColorInput", // Type of input
        optional: {
          mt: 'md',
          // className: classes.abc,
          swatches: ['#2e2e2e', '#15aabf', '#12b886', '#40c057', '#82c91e', '#fab005', '#fd7e14']
        },
      },
      {
        key: "fileinput",
        name: "FileInput",
        type: "FileInput",
        optional: { mt: 'md' }
      },
      {
        key: "jsoninput",
        name: "JsonInput",
        type: "JsonInput",
        optional: { mt: 'md' }
      },
      {
        key: "numberinput",
        name: "NumberInput",
        type: "NumberInput",
        optional: { mt: 'md' }
      },
      {
        key: "passwordinput",
        name: "PasswordInput",
        type: "PasswordInput",
        optional: { mt: 'md' }
      },
      {
        key: "textarea",
        name: "Textarea",
        type: "Textarea",
        optional: { mt: 'md' }
      },
      {
        key: "textinput",
        name: "TextInput",
        type: "TextInput",
        optional: { mt: 'md' }
      },
      {
        key: "multiselect",
        name: "MultiSelect",
        type: "MultiSelect",
        data: ['one', 'two', 'three'],
        optional: { mt: 'md' }
      },
      {
        key: "select",
        name: "Select",
        type: "Select",
        data: [
          {
            label: 'true',
            value: '1'
          },
          {
            label: 'false',
            value: '0'
          }
        ],
        optional: { mt: 'md' }
      },
      {
        key: "tagsinput",
        name: "TagsInput",
        type: "TagsInput",
        optional: { mt: 'md' }
      },
      {
        key: "datetimepicker",
        name: "DateTimePicker",
        type: "DateTimePicker",
        optional: { mt: 'md' }
      },
      {
        key: "dateinput",
        name: "DateInput",
        type: "DateInput",
        optional: { mt: 'md' }
      },
      {
        key: "pininput",
        name: "PinInput",
        type: "PinInput",
        optional: { mt: 'md' }
      },
      {
        key: "radio",
        name: "Radio",
        type: "Radio",
        optional: { mt: 'md' }
      },
      {
        key: "rating",
        name: "Rating",
        type: "Rating",
        optional: { mt: 'md' }
      },
      {
        key: "switch",
        name: "Switch",
        type: "Switch",
        optional: { mt: 'md' }
      },
      {
        key: "radiogroup",
        name: "RadioGroup",
        type: "RadioGroup",
        data: (<Group>
          <Radio size="xs" label="Active" value={'1'} />
          <Radio size="xs" label="Inactive" value={'0'} />
        </Group>),
        optional: { mt: 'md' }
      },
      {
        key: "checkbox",
        name: "Checkbox",
        type: "Checkbox",
        optional: { mt: 'md', bg: 'red' }
      },
      {
        key: "chip",
        name: "Chip",
        type: "Chip",
        data: 'CHIP',
        optional: { mt: 'md' }
      },
    ]
  };

  const form = useForm({
    initialValues: response.data,
    // validate:(values)=>{}
  })

  return (
    <>
      <form
          onSubmit={form.onSubmit(async (values) => {
            // Handle submit
            console.log(values)
          })}
        >
      <RenderForm form={form} formFormat={response.format} column={response.column}/>
      <br></br>
      <Button type='submit'>Submit</Button>
      </form>
    </>
  )
}

export default PageWelcome
