// ** MUI Imports
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import CardContent from '@mui/material/CardContent';
import Divider from '@mui/material/Divider';
import DialogActions from '@mui/material/DialogActions';
import Button from '@mui/material/Button';

// ** Icons Imports
import { Icon } from '@iconify/react';
// import DatePicker from '@mui/lab/DatePicker';

// ** Custom Components Imports
import TextForm from 'src/components/text-form';
import DateForm from 'src/components/date-form';
import SelectForm from 'src/components/select-form';

// ** custom hooks
import { useFormEvents } from './use-form-events.hook';
import Translations from 'src/layouts/components/Translations';
import { useTranslation } from 'react-i18next';
import { useState } from 'react';
import AutocompleteText from 'src/components/autocomplete-text';
import { Card } from '@material-ui/core';
import { FormSelect, Router } from 'mdi-material-ui';
import SelectDescription from 'src/components/SelectDescription';

function FormEvents({ id, open, toggle, data, updateData }) {
  const { t } = useTranslation();

  const [focus, setFocus] = useState('');

  const {
    control,
    loading,
    categories,
    handleSubmit,
    tagsItems,
    typeItems,
    searchTag,
    refs,
    place,
    errors,
    venue,
    onlineEvent,
    type,
    timezones,
    isUpdate,
    handleCancel,
    cancelUpdate,
  } = useFormEvents(id, data, updateData);

  return (
    <Card>
      <Box sx={{ m: 8, textAlign: 'center' }}>
        <Typography variant='h5' sx={{ mb: 3, mt: 4 }}>
          <Translations text={id ? 'forms.basicInfo' : 'forms.addEvent'} />
        </Typography>

        <CardContent>
          <form onSubmit={handleSubmit}>
            <Grid container spacing={3}>
              <Grid item xs={12} sm={12}>
                <Divider sx={{ mb: 5 }} />
              </Grid>

              <Grid item xs={2} sm={0.5}>
                <Icon icon='material-symbols:medical-information-outline-rounded' width='25' />
              </Grid>

              <Grid item xs={10} sm={11.5}>
                <Typography variant='h6' sx={{ mb: 3, display: 'flex', alignItems: 'flex-start' }}>
                  <Translations text={'forms.basicInfo'} />
                </Typography>
              </Grid>

              <Grid item xs={12} sm={6}>
                <TextForm
                  loading={loading}
                  fullwidth
                  control={control}
                  name='name'
                  label='forms.eventName'
                  textTranslations='forms.eventName'
                  placeholder={t('forms.eventName')}
                  onFocus={focus === 'name' ? true : false}
                  errorName={errors.name}
                />
              </Grid>

              {/* <Grid item xs={12} sm={6}>
                <TextForm
                  loading={loading}
                  fullwidth
                  control={control}
                  name='description'
                  label='forms.eventDescription'
                  textTranslations='forms.eventDescription'
                  placeholder={t('forms.eventDescription')}
                  onFocus={focus === 'description' ? true : false}
                  errorName={errors.description}
                />
              </Grid> */}

              <Grid item xs={12} sm={6}>
                <SelectForm
                  fullwidth
                  control={control}
                  name='idCategory'
                  label='general.category'
                  items={categories}
                  textTranslations='general.category'
                  placeholder=''
                  loading={loading}
                  errorName={errors.idCategory}
                />
                {/* <SelectDescription
                  control={control}
                  name='idCategory'
                  items={categories}
                  errorName={errors.idCategory}
                  isLoading={loading}
                /> */}
              </Grid>

              <Grid item xs={12} sm={6}>
                <AutocompleteText
                  freeSolo
                  loading={loading}
                  control={control}
                  options={tagsItems}
                  filterCallback={searchTag}
                  name='tags'
                  label={t('general.tags')}
                  // placeholder=''
                  renderOption={(props, option) => {
                    const { select } = option;

                    return (
                      <li {...props}>
                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
                          <Box
                            sx={{
                              display: 'flex',
                              alignItems: 'flex-start',
                              flexDirection: 'column',
                            }}
                          >
                            <Typography
                              noWrap
                              component='a'
                              variant='body2'
                              sx={{
                                fontWeight: 600,
                                color: 'text.primary',
                                textDecoration: 'none',
                              }}
                            >
                              {select.name}
                            </Typography>
                          </Box>
                        </Box>
                      </li>
                    );
                  }}
                />
              </Grid>

              {/* <Grid item xs={12} sm={6}>
                <TextForm
                  loading={loading}
                  fullwidth
                  control={control}
                  name='exponents'
                  label='forms.exponents'
                  textTranslations='forms.exponents'
                  placeholder={t('forms.exponents')}
                  onFocus={focus === 'exponents' ? true : false}
                  errorName={errors.exponents}
                />
              </Grid> */}

              <Grid item xs={12} sm={12}>
                <Divider sx={{ mt: 10, mb: 5 }} />
              </Grid>

              <Grid item xs={2} sm={0.5}>
                <Icon icon='uiw:map' width='25' />
              </Grid>

              <Grid item xs={10} sm={11.5}>
                <Typography variant='h6' sx={{ mb: 3, display: 'flex', alignItems: 'flex-start' }}>
                  <Translations text={'forms.location'} />
                </Typography>
              </Grid>

              <Grid item xs={12} sm={6} sx={{ display: 'flex' }}>
                <Button
                  variant={type === 1 ? 'contained' : 'outlined'}
                  onClick={venue}
                  sx={{ mb: 3, mr: 4, display: 'flex', alignItems: 'flex-start' }}
                  color='success'
                >
                  <Translations text={'general.address'} />
                </Button>

                <Button
                  variant={type === 2 ? 'contained' : 'outlined'}
                  onClick={onlineEvent}
                  sx={{ mb: 3, display: 'flex', alignItems: 'flex-start' }}
                  color='success'
                >
                  <Translations text={'events.type.online'} />
                </Button>
              </Grid>
              {type === 1 && (
                <>
                  <Grid item xs={12} sm={12}>
                    <TextForm
                      loading={loading}
                      fullwidth
                      id='location'
                      control={control}
                      name='location'
                      label='forms.location'
                      textTranslations='forms.location'
                      placeholder={t('forms.location')}
                      onFocus={focus === 'location' ? true : false}
                      inputRef={refs.location}
                      errorName={errors.location}
                    />
                  </Grid>

                  {place && <Grid item xs={12} sm={12} ref={refs.map} sx={{ height: 400, m: 5 }} />}

                  <Grid item xs={12} sm={6}>
                    <TextForm
                      loading={loading}
                      fullwidth
                      control={control}
                      name='country'
                      label='select.country'
                      textTranslations='select.country'
                      placeholder={t('select.country')}
                      onFocus={focus === 'country' ? true : false}
                      inputRef={refs.country}
                      errorName={errors.country}
                    />
                  </Grid>

                  <Grid item xs={12} sm={6}>
                    <TextForm
                      loading={loading}
                      fullwidth
                      control={control}
                      name='city'
                      label='select.city'
                      textTranslations='select.city'
                      placeholder={t('select.city')}
                      onFocus={focus === 'city' ? true : false}
                      inputRef={refs.city}
                      errorName={errors.city}
                    />
                  </Grid>

                  <Grid item xs={12} sm={6}>
                    <TextForm
                      loading={loading}
                      fullwidth
                      control={control}
                      name='state'
                      label='select.status'
                      textTranslations='select.status'
                      placeholder={t('select.status')}
                      onFocus={focus === 'name' ? true : false}
                      inputRef={refs.state}
                      errorName={errors.state}
                    />
                  </Grid>

                  <Grid item xs={12} sm={6}>
                    <TextForm
                      loading={loading}
                      fullwidth
                      control={control}
                      name='streetAddressOne'
                      label='forms.streetAddressOne'
                      textTranslations='forms.streetAddressOne'
                      placeholder={t('forms.streetAddressOne')}
                      onFocus={focus === 'streetAddressOne' ? true : false}
                      inputRef={refs.streetAddressOne}
                      errorName={errors.streetAddressOne}
                    />
                  </Grid>

                  <Grid item xs={12} sm={6}>
                    <TextForm
                      loading={loading}
                      fullwidth
                      control={control}
                      name='streetAddressTwo'
                      label='forms.streetAddressTwo'
                      textTranslations='forms.streetAddressTwo'
                      placeholder={t('forms.streetAddressTwo')}
                      onFocus={focus === 'streetAddressTwo' ? true : false}
                      inputRef={refs.streetAddressTwo}
                      errorName={errors.streetAddressTwo}
                    />
                  </Grid>

                  <Grid item xs={12} sm={6}>
                    <TextForm
                      loading={loading}
                      fullwidth
                      control={control}
                      name='zipCode'
                      label='forms.zipCode'
                      textTranslations='forms.zipCode'
                      placeholder={t('forms.zipCode')}
                      onFocus={focus === 'zipCode' ? true : false}
                      inputRef={refs.zipCode}
                      errorName={errors.zipCode}
                    />
                  </Grid>
                </>
              )}

              <Grid item xs={12} sm={12}>
                <Divider sx={{ mt: 10, mb: 5 }} />
              </Grid>

              <Grid item xs={2} sm={0.5}>
                <Icon icon='healthicons:i-schedule-school-date-time-outline' width='30' />
              </Grid>

              <Grid item xs={10} sm={11.5}>
                <Typography variant='h6' sx={{ mb: 3, display: 'flex', alignItems: 'flex-start' }}>
                  <Translations text={'forms.dateandtime'} />
                </Typography>
              </Grid>

              <Grid item xs={12} sm={6}>
                <DateForm
                  //loading={loading}
                  control={control}
                  openTo='day'
                  inputFormat='MM/dd/yyyy hh:mm'
                  name='startDate'
                  views={['year', 'month', 'day', 'hours', 'minutes']}
                  label={<Translations text='general.startDate' />}
                  errorName={errors.startDate}
                  // placeholder='Expected Close Date'
                />
              </Grid>

              <Grid item xs={12} sm={6}>
                <DateForm
                  //loading={loading}
                  control={control}
                  openTo='day'
                  inputFormat='MM/dd/yyyy hh:mm'
                  name='endDate'
                  views={['year', 'month', 'day', 'hours', 'minutes']}
                  errorName={errors.endDate}
                  label={<Translations text='general.endDate' />}
                  // placeholder='Expected Close Date'
                />
              </Grid>

              <Grid item xs={12} sm={6}>
                <SelectForm
                  fullwidth
                  control={control}
                  name='timezone'
                  label={t('forms.timezone')}
                  items={timezones}
                  loading={loading}
                  errorName={errors.timezone}
                />
              </Grid>
            </Grid>

            <Divider sx={{ mt: 10, mb: 5 }} />
            <DialogActions sx={{ pb: { xs: 8, sm: 5 }, justifyContent: 'flex-end' }}>
              <Button variant='contained' sx={{ marginRight: 1 }} type='submit'>
                <Translations text={'general.save'} />
              </Button>
              {id === undefined && (
                <Button variant='outlined' color='secondary' onClick={handleCancel}>
                  <Translations text={id ? 'Reset' : 'general.cancel'} />
                </Button>
              )}
            </DialogActions>
          </form>
        </CardContent>
      </Box>
    </Card>
  );
}

export default FormEvents;