import * as yup from 'yup'
import { generateLabelValueOptions } from '../../constants'
import Form from '../Form/Form'
import { Field } from '../Form/RenderForm'

const fields: Field[] = [
  {
    name: 'host',
    render: 'FormTextField',
    required: true,
    label: 'Host',
  },
  {
    name: 'username',
    render: 'FormTextField',
    required: true,
    label: 'Username',
  },
  {
    name: 'password',
    render: 'FormTextField',
    required: true,
    label: 'Password',
  },
  {
    name: 'port',
    render: 'FormTextField',
    required: true,
    label: 'Port',
  },
  {
    name: 'database',
    render: 'FormTextField',
    required: true,
    label: 'Database',
  },
  {
    name: 'timezone',
    render: 'FormMultiSelect',
    elementProps: {
      multiple: false,
    },
    validation: yup.object().required('Select a Timezone'),
    required: true,
    label: 'Timezone',
  },
]

export const DatabaseConfigurationForm = ({
  data,
  close,
  successToastMessage,
  type,
}) => {
  const timezones = Intl.supportedValuesOf('timeZone')
  return (
    <Form
      onCancel={close}
      endPoint="/hrms/punch-logs-database-config"
      fields={fields}
      cols={1}
      refetchKey="punch-logs-database-config"
      dropdowns={{ timezone: generateLabelValueOptions(timezones) }}
      submitBtn={{
        label: 'Save',
      }}
      onSubmit={(originalFormData) => {
        return {
          ...originalFormData,
          timezone: originalFormData?.timezone?.value,
          type,
        }
      }}
      defaultValues={{
        ...data,
        timezone: {
          label: data?.timezone,
          value: data?.timezone,
        },
      }}
      successToastMessage={successToastMessage}
      onSuccess={() => {
        close()
      }}
    />
  )
}
