import { mdiChartTimelineVariant } from '@mdi/js'
import Head from 'next/head'
import React, { ReactElement } from 'react'
import { Field, Form, Formik } from 'formik'
import { useRouter } from 'next/router'

import BaseButton from '../../components/BaseButton'
import BaseButtons from '../../components/BaseButtons'
import BaseDivider from '../../components/BaseDivider'
import CardBox from '../../components/CardBox'
import FormField from '../../components/FormField'
import { RichTextField } from '../../components/RichTextField'
import SectionMain from '../../components/SectionMain'
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
import { SelectField } from '../../components/SelectField'
import { getPageTitle } from '../../config'
import LayoutAuthenticated from '../../layouts/Authenticated'
import { useAppDispatch } from '../../stores/hooks'
import { create } from '../../stores/unit_types/unit_typesSlice'

const initialValues = {
  property: null,
  name: '',
  code: '',
  max_occupancy: '',
  bedrooms: '',
  bathrooms: '',
  size_sqm: '',
  description: '',
  base_nightly_rate: '',
  base_monthly_rate: '',
  minimum_stay_nights: '',
}

const UnitTypesNew = () => {
  const router = useRouter()
  const dispatch = useAppDispatch()

  const handleSubmit = async (values: typeof initialValues) => {
    await dispatch(create(values))
    await router.push('/unit_types/unit_types-list')
  }

  return (
    <>
      <Head>
        <title>{getPageTitle('New Unit Type')}</title>
      </Head>

      <SectionMain>
        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Unit Type" main>
          {''}
        </SectionTitleLineWithButton>

        <CardBox className="mx-auto max-w-6xl">
          <Formik initialValues={initialValues} onSubmit={handleSubmit}>
            <Form>
              <div className="mb-6 rounded-2xl border border-blue-200 bg-blue-50 px-4 py-4 text-sm text-blue-900 dark:border-blue-900 dark:bg-blue-950/40 dark:text-blue-100">
                Unit types are templates under a property, like Studio or Two Bedroom Deluxe. Create the actual units after this template is saved.
              </div>

              <div className="grid gap-5 md:grid-cols-2">
                <FormField label="Property" labelFor="property" help="Choose the property this unit type belongs to.">
                  <Field
                    name="property"
                    id="property"
                    component={SelectField}
                    options={[]}
                    itemRef={'properties'}
                    placeholder="Select a property"
                    noOptionsMessage="No properties available yet"
                  />
                </FormField>

                <FormField label="Unit type name" labelFor="name">
                  <Field name="name" id="name" placeholder="Studio" />
                </FormField>

                <FormField label="Code" labelFor="code">
                  <Field name="code" id="code" placeholder="STUDIO" />
                </FormField>

                <FormField label="Max occupancy" labelFor="max_occupancy">
                  <Field type="number" name="max_occupancy" id="max_occupancy" placeholder="2" />
                </FormField>

                <FormField label="Bedrooms" labelFor="bedrooms">
                  <Field type="number" name="bedrooms" id="bedrooms" placeholder="1" />
                </FormField>

                <FormField label="Bathrooms" labelFor="bathrooms">
                  <Field type="number" name="bathrooms" id="bathrooms" placeholder="1" />
                </FormField>

                <FormField label="Size (sqm)" labelFor="size_sqm">
                  <Field type="number" name="size_sqm" id="size_sqm" placeholder="45" />
                </FormField>

                <FormField label="Base nightly rate" labelFor="base_nightly_rate">
                  <Field type="number" name="base_nightly_rate" id="base_nightly_rate" placeholder="150" />
                </FormField>

                <FormField label="Base monthly rate" labelFor="base_monthly_rate">
                  <Field type="number" name="base_monthly_rate" id="base_monthly_rate" placeholder="3000" />
                </FormField>

                <FormField label="Minimum stay nights" labelFor="minimum_stay_nights">
                  <Field type="number" name="minimum_stay_nights" id="minimum_stay_nights" placeholder="2" />
                </FormField>

                <div className="md:col-span-2">
                  <FormField label="Description" labelFor="description" hasTextareaHeight>
                    <Field name="description" id="description" component={RichTextField} />
                  </FormField>
                </div>
              </div>

              <BaseDivider />

              <BaseButtons>
                <BaseButton type="submit" color="info" label="Save" />
                <BaseButton type="reset" color="info" outline label="Reset" />
                <BaseButton type="reset" color="danger" outline label="Cancel" onClick={() => router.push('/unit_types/unit_types-list')} />
              </BaseButtons>
            </Form>
          </Formik>
        </CardBox>
      </SectionMain>
    </>
  )
}

UnitTypesNew.getLayout = function getLayout(page: ReactElement) {
  return <LayoutAuthenticated>{page}</LayoutAuthenticated>
}

export default UnitTypesNew
