// ** React Imports
import { useState, forwardRef, ForwardedRef } 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 DatePicker from "react-datepicker";
import DatePickerWrapper from "src/@core/styles/libs/react-datepicker";
import { DateType } from 'src/types/forms/reactDatepickerTypes'
interface State {
  password: string;
  showPassword: boolean;
}

const CustomInput = forwardRef(({ ...props }, ref: ForwardedRef<HTMLElement>) => {
	return <TextField inputRef={ref} fullWidth label="月を選択して作成する"  {...props} />
})
CustomInput.displayName = 'CustomInput';

const ScheduleBulkCreate = () => {
  const [date, setDate] = useState<DateType>(new Date());

  return (
    <Card>
        <CardHeader title="まとめて登録" />
        <CardContent>
            <form onSubmit={(e) => e.preventDefault()}>
                <Grid container spacing={5}>
                <Grid item xs={4}>
                    <DatePickerWrapper>
                        <DatePicker
                            selected={date}
                            id="date-start"
                            customInput={<CustomInput/>}
                            onChange={(date: Date) => setDate(date)}
                        />
                    </DatePickerWrapper>
                </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" size="large">
                    登録する
                    </Button>
                </Grid>
                </Grid>
            </form>
        </CardContent>
    </Card>
  );
};

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

export default ScheduleBulkCreate;