import { mdiAccount, mdiChartTimelineVariant, mdiMail, mdiUpload } from '@mdi/js'
import Head from 'next/head'
import React, { ReactElement } from 'react'
import CardBox from '../../components/CardBox'
import LayoutAuthenticated from '../../layouts/Authenticated'
import SectionMain from '../../components/SectionMain'
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
import { getPageTitle } from '../../config'

import { Field, Form, Formik } from 'formik'
import FormField from '../../components/FormField'
import BaseDivider from '../../components/BaseDivider'
import BaseButtons from '../../components/BaseButtons'
import BaseButton from '../../components/BaseButton'
import FormCheckRadio from '../../components/FormCheckRadio'
import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'
import FormFilePicker from '../../components/FormFilePicker'
import FormImagePicker from '../../components/FormImagePicker'
import { SwitchField } from '../../components/SwitchField'

import { SelectField } from '../../components/SelectField'
import { SelectFieldMany } from "../../components/SelectFieldMany";
import {RichTextField} from "../../components/RichTextField";

import { create } from '../../stores/reservations/reservationsSlice'
import { useAppDispatch } from '../../stores/hooks'
import { useRouter } from 'next/router'
import moment from 'moment';

const initialValues = {
    
    
    
    
    
    
    
    
    
    
    
    
    
    tenant: '',
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    organization: '',
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    booking_request: '',
    
    
    
    
    reservation_code: '',
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    status: 'quoted',
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    property: '',
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    unit: '',
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    unit_type: '',
    
    
    
    
    
    
    
    
    
    check_in_at: '',
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    check_out_at: '',
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    actual_check_in_at: '',
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    actual_check_out_at: '',
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    early_check_in: false,
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    late_check_out: false,
    
    
    
    
    
    
    
    
    
    
    
    
    guest_count: '',
    
    
    
    
    
    
    
    
    
    
    
    
    nightly_rate: '',
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    monthly_rate: '',
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    currency: '',
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    internal_notes: '',
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    external_notes: '',
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    guests: [],
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    service_requests: [],
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    invoices: [],
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    documents: [],
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    comments: [],
    
    
}


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

    
    
    // get from url params
    const { dateRangeStart, dateRangeEnd } = router.query
    

  const handleSubmit = async (data) => {
    await dispatch(create(data))
    await router.push('/reservations/reservations-list')
  }
  return (
    <>
      <Head>
        <title>{getPageTitle('New Reservation')}</title>
      </Head>
      <SectionMain>
        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="New Reservation" main>
        {''}
        </SectionTitleLineWithButton>
        <CardBox className='mx-auto max-w-6xl'>
          <Formik
            initialValues={
                
                
                
                dateRangeStart && dateRangeEnd ?
                {
                    ...initialValues,
                    check_in_at: moment(dateRangeStart).format('YYYY-MM-DDTHH:mm'),
                    check_out_at: moment(dateRangeEnd).format('YYYY-MM-DDTHH:mm'),
                } : initialValues
                
            }
            onSubmit={(values) => handleSubmit(values)}
          >
            <Form>
              <div className='grid gap-5 md:grid-cols-2'>





















  <FormField label="Tenant" labelFor="tenant">
      <Field name="tenant" id="tenant" component={SelectField} options={[]} itemRef={'tenants'}></Field>
  </FormField>



























  <FormField label="Organization" labelFor="organization">
      <Field name="organization" id="organization" component={SelectField} options={[]} itemRef={'organizations'}></Field>
  </FormField>



























  <FormField label="Bookingrequest" labelFor="booking_request">
      <Field name="booking_request" id="booking_request" component={SelectField} options={[]} itemRef={'booking_requests'}></Field>
  </FormField>









  <FormField
      label="Reservationcode"
  >
      <Field
          name="reservation_code"
          placeholder="Reservationcode"
      />
  </FormField>









































  <FormField label="Status" labelFor="status">
      <Field name="status" id="status" component="select">
      
        <option value="quoted">quoted</option>
      
        <option value="confirmed">confirmed</option>
      
        <option value="checked_in">checked_in</option>
      
        <option value="checked_out">checked_out</option>
      
        <option value="canceled">canceled</option>
      
        <option value="no_show">no_show</option>
      
      </Field>
  </FormField>































  <FormField label="Property" labelFor="property">
      <Field name="property" id="property" component={SelectField} options={[]} itemRef={'properties'}></Field>
  </FormField>



























  <FormField label="Unit" labelFor="unit">
      <Field name="unit" id="unit" component={SelectField} options={[]} itemRef={'units'}></Field>
  </FormField>



























  <FormField label="Unittype" labelFor="unit_type">
      <Field name="unit_type" id="unit_type" component={SelectField} options={[]} itemRef={'unit_types'}></Field>
  </FormField>



















  <FormField
      label="Check-inat"
  >
      <Field
          type="datetime-local"
          name="check_in_at"
          placeholder="Check-inat"
      />
  </FormField>



























  <FormField
      label="Check-outat"
  >
      <Field
          type="datetime-local"
          name="check_out_at"
          placeholder="Check-outat"
      />
  </FormField>



























  <FormField
      label="Actualcheck-inat"
  >
      <Field
          type="datetime-local"
          name="actual_check_in_at"
          placeholder="Actualcheck-inat"
      />
  </FormField>



























  <FormField
      label="Actualcheck-outat"
  >
      <Field
          type="datetime-local"
          name="actual_check_out_at"
          placeholder="Actualcheck-outat"
      />
  </FormField>

































  <FormField label='Earlycheck-in' labelFor='early_check_in'>
      <Field
          name='early_check_in'
          id='early_check_in'
          component={SwitchField}
      ></Field>
  </FormField>



























  <FormField label='Latecheck-out' labelFor='late_check_out'>
      <Field
          name='late_check_out'
          id='late_check_out'
          component={SwitchField}
      ></Field>
  </FormField>

















    <FormField
        label="Guestcount"
    >
        <Field
            type="number"
            name="guest_count"
            placeholder="Guestcount"
        />
    </FormField>



























    <FormField
        label="Nightlyrate"
    >
        <Field
            type="number"
            name="nightly_rate"
            placeholder="Nightlyrate"
        />
    </FormField>



























    <FormField
        label="Monthlyrate"
    >
        <Field
            type="number"
            name="monthly_rate"
            placeholder="Monthlyrate"
        />
    </FormField>





















  <FormField
      label="Currency"
  >
      <Field
          name="currency"
          placeholder="Currency"
      />
  </FormField>





























    <FormField label="Internalnotes" hasTextareaHeight>
        <Field name="internal_notes" as="textarea" placeholder="Internalnotes" />
    </FormField>



























    <FormField label="Externalnotes" hasTextareaHeight>
        <Field name="external_notes" as="textarea" placeholder="Externalnotes" />
    </FormField>













































    <FormField label='Guests' labelFor='guests'>
        <Field
            name='guests'
            id='guests'
            itemRef={'reservation_guests'}
            options={[]}
            component={SelectFieldMany}>
        </Field>
    </FormField>



























    <FormField label='Servicerequests' labelFor='service_requests'>
        <Field
            name='service_requests'
            id='service_requests'
            itemRef={'service_requests'}
            options={[]}
            component={SelectFieldMany}>
        </Field>
    </FormField>



























    <FormField label='Invoices' labelFor='invoices'>
        <Field
            name='invoices'
            id='invoices'
            itemRef={'invoices'}
            options={[]}
            component={SelectFieldMany}>
        </Field>
    </FormField>



























    <FormField label='Documents' labelFor='documents'>
        <Field
            name='documents'
            id='documents'
            itemRef={'documents'}
            options={[]}
            component={SelectFieldMany}>
        </Field>
    </FormField>



























    <FormField label='Comments' labelFor='comments'>
        <Field
            name='comments'
            id='comments'
            itemRef={'activity_comments'}
            options={[]}
            component={SelectFieldMany}>
        </Field>
    </FormField>





              </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('/reservations/reservations-list')}/>
              </BaseButtons>
            </Form>
          </Formik>
        </CardBox>
      </SectionMain>
    </>
  )
}

ReservationsNew.getLayout = function getLayout(page: ReactElement) {
  return (
      <LayoutAuthenticated
        
          permission={'CREATE_RESERVATIONS'}
        
      >
          {page}
      </LayoutAuthenticated>
  )
}

export default ReservationsNew
