// ** React Imports
import { useState, forwardRef, ForwardedRef, ChangeEvent } from "react";

// ** Next Import
import Link from "next/link";

// ** MUI Imports
import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import CardHeader from "@mui/material/CardHeader";
import CardContent from "@mui/material/CardContent";

// ** Icon Imports
import Icon from "src/@core/components/icon";
import RadioGroup from "@mui/material/RadioGroup";
import Radio from "@mui/material/Radio";
import FormControlLabel from "@mui/material/FormControlLabel";
import Typography from "@mui/material/Typography";
import DatePicker from 'react-datepicker'
import DatePickerWrapper from 'src/@core/styles/libs/react-datepicker'
import InputAdornment from '@mui/material/InputAdornment'
import Select, { SelectChangeEvent } from "@mui/material/Select";
import { FormControl } from "@mui/material";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import OutlinedInput from '@mui/material/OutlinedInput'
import { Autocomplete } from "@mui/material";
import { DateType } from 'src/types/forms/reactDatepickerTypes'
interface Data {
  language: string
}

const CustomInput = forwardRef(({ ...props }, ref: ForwardedRef<HTMLElement>) => {
	return <TextField inputRef={ref} 
  fullWidth
  label="日付"    
  InputProps={{
  startAdornment: (
    <InputAdornment position='start'>
      <Icon icon='ri-calendar-line' />
    </InputAdornment>
  )
}} {...props} />
})

CustomInput.displayName = 'CustomInput';

const initialData: Data = {
  language: 'arabic',
}

const userList = [
  "山田かずお",
  "伊藤ゆう",
];

const vehicleList = [
  "クリーン1号",
  "クリーン2号",
];

const ScheduleCreate = () => {
  const [date, setDate] = useState<DateType>(new Date())
  const [scheduleName, setScheduleName] = useState<string>('')
  const [value, setValue] = useState<string>('checked')
  const [statusValue, setStatusValue] = useState<string>("");
  const [statusValue2, setStatusValue2] = useState<string>("");
  const [formData, setFormData] = useState<Data>(initialData)

  const [language, setLanguage] = useState<string[]>([])

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setValue((event.target as HTMLInputElement).value)
  }

  const handleStatusValue = (e: SelectChangeEvent) => {
    setStatusValue(e.target.value);
  };

  const handleStatusValue2 = (e: SelectChangeEvent) => {
    setStatusValue2(e.target.value);
  };

  const handleSelectChange = (event: SelectChangeEvent<string[]>) => {
    setLanguage(event.target.value as string[])
  }

  return (
    <Card>
        <CardHeader title="スケジュール" />
        <CardContent>
            <form onSubmit={(e) => e.preventDefault()}>
                <Grid container spacing={5}>
                  <Grid item xs={6}>
                    <FormControl size="medium" fullWidth>
                      <Typography>顧客種別</Typography>
                      <RadioGroup row value={value} name='simple-radio' onChange={handleChange} aria-label='simple-radio'>
                        <FormControlLabel value='行政系顧客' control={<Radio />} label='行政系顧客' />
                        <FormControlLabel value='事業系顧客' control={<Radio />} label='事業系顧客' />
                      </RadioGroup>
                    </FormControl>
                  </Grid>
                  <Grid item xs={6}></Grid>
                  <Grid item xs={6}>
                    <FormControl size="medium" fullWidth>
                      <DatePickerWrapper>
                          <DatePicker
                              selected={date}
                              id="date-start"
                              customInput={<CustomInput />}
                              onChange={(date: Date) => setDate(date)}
                          />
                      </DatePickerWrapper>
                    </FormControl>
                  </Grid>
                  <Grid item xs={6}></Grid>
                  <Grid item xs={6}>
                    <FormControl size="medium" fullWidth>
                      <TextField
                        fullWidth
                        autoFocus
                        label="スケジュール名"
                        value={scheduleName}
                        placeholder="スケジュール名"
                      />
                    </FormControl>
                  </Grid>
                  <Grid item xs={6}></Grid>
                  <Grid item xs={6}>
                    <FormControl size="medium" fullWidth>
                      <InputLabel id="invoice-status-select">顧客</InputLabel>
                      <Select
                        sx={{ pr: 4 }}
                        value={statusValue}
                        label="顧客"
                        onChange={handleStatusValue}
                        labelId="invoice-status-select"
                      >
                        <MenuItem value="">----</MenuItem>
                        <MenuItem value="1">〇〇グループ1</MenuItem>
                        <MenuItem value="2">〇〇グループ2</MenuItem>
                        <MenuItem value="3">〇〇グループ3</MenuItem>
                      </Select>
                    </FormControl>
                  </Grid>

                  <Grid item xs={6}></Grid>
                  <Grid item xs={6}>
                    <FormControl size="medium" fullWidth>
                      <InputLabel id="invoice-status-select">ルート</InputLabel>
                      <Select
                        sx={{ pr: 4 }}
                        value={statusValue2}
                        label="ルート"
                        onChange={handleStatusValue2}
                        labelId="invoice-status-select"
                      >
                        <MenuItem value="">----</MenuItem>
                        <MenuItem value="1">〇〇グループ1</MenuItem>
                        <MenuItem value="2">〇〇グループ2</MenuItem>
                        <MenuItem value="3">〇〇グループ3</MenuItem>
                      </Select>
                    </FormControl>
                  </Grid>
                  <Grid item xs={6}></Grid>
                  <Grid item xs={12} sm={6}>
                    <FormControl fullWidth>
                      <Autocomplete
                          multiple
                          options={userList}
                          getOptionLabel={(option) => option}
                          disableCloseOnSelect
                          renderInput={(params) => (
                            <TextField
                              {...params}
                              variant="outlined"
                              label="ユーザー（担当者）"
                            />
                          )}
                          sx={{
                            '& .MuiAutocomplete-tag': {
                              color: "primary.main",
                              backgroundColor: "#666cff29",
                            }
                          }}
                        />
                    </FormControl>
                  </Grid>

                  <Grid item xs={6}></Grid>
                  <Grid item xs={12} sm={6}>
                    <FormControl fullWidth>
                      <Autocomplete
                          multiple
                          options={vehicleList}
                          getOptionLabel={(option) => option}
                          disableCloseOnSelect
                          renderInput={(params) => (
                            <TextField
                              {...params}
                              variant="outlined"
                              label="車両"
                            />
                          )}
                          sx={{
                            '& .MuiAutocomplete-tag': {
                              color: "primary.main",
                              backgroundColor: "#666cff29",
                            }
                          }}
                        />
                    </FormControl>
                  </Grid>

                  <Grid item xs={12}>
                      <Button
                      component={Link}
                      type="button"
                      variant="outlined"
                      href="/apps/group/list"
                      sx={{ mr: 5 }}
                      color="secondary"
                      size="large"
                      >
                      キャンセル
                      </Button>
                      <Button type='button' variant='contained' sx={{mr : 5}}  color='error' size='large' >
                      削除する
                      </Button>
                      <Button type="button" variant="contained" size="large">
                      登録する
                      </Button>
                  </Grid>
                </Grid>
            </form>
        </CardContent>
    </Card>
  );
};

ScheduleCreate.acl = {
  action: "manage",
  subject: "admin",
};

export default ScheduleCreate;