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

// ** Next Imports
import Link from "next/link";
import { GetStaticProps, InferGetStaticPropsType } from "next/types";

// ** MUI Imports
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import Menu from "@mui/material/Menu";
import Grid from "@mui/material/Grid";
import { styled } from "@mui/material/styles";
import MenuItem from "@mui/material/MenuItem";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import { DataGrid, GridColDef } from "@mui/x-data-grid";

// ** Icon Imports
import Icon from "src/@core/components/icon";

// ** Store Imports
import { useDispatch } from "react-redux";


// ** Types Imports
import { AppDispatch } from "src/store";
import { ThemeColor } from "src/@core/layouts/types";
import { ScheduleType } from "src/types/apps/scheduleTypes";
import RadioGroup from "@mui/material/RadioGroup";
import Radio from "@mui/material/Radio";
import FormControlLabel from "@mui/material/FormControlLabel";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import DatePicker from 'react-datepicker'
import DatePickerWrapper from 'src/@core/styles/libs/react-datepicker'
import InputAdornment from '@mui/material/InputAdornment'
import { DateType } from 'src/types/forms/reactDatepickerTypes'
interface CellType {
  row: ScheduleType;
}

const LinkStyled = styled(Link)(({ theme }) => ({
  fontWeight: 600,
  fontSize: "1rem",
  cursor: "pointer",
  textDecoration: "none",
  color: theme.palette.text.secondary,
  "&:hover": {
    color: theme.palette.primary.main,
  },
}));

const RowOptions = ({ id }: { id: number | string }) => {
  // ** State
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);

  const rowOptionsOpen = Boolean(anchorEl);

  const handleRowOptionsClick = (event: MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };
  const handleRowOptionsClose = () => {
    setAnchorEl(null);
  };
  

  return (
    <>
      <IconButton size="small" onClick={handleRowOptionsClick}>
        <Icon icon="mdi:dots-vertical" />
      </IconButton>
      <Menu
        keepMounted
        anchorEl={anchorEl}
        open={rowOptionsOpen}
        onClose={handleRowOptionsClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "right",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "right",
        }}
        PaperProps={{ style: { minWidth: "8rem" } }}
      >
        <MenuItem
          component={Link}
          sx={{ "& svg": { mr: 2 } }}
          onClick={handleRowOptionsClose}
          href="/apps/user/view/overview/"
        >
          <Icon icon="mdi:eye-outline" fontSize={20} />
          View
        </MenuItem>
        <MenuItem onClick={handleRowOptionsClose} sx={{ "& svg": { mr: 2 } }}>
          <Icon icon="mdi:pencil-outline" fontSize={20} />
          Edit
        </MenuItem>
        <MenuItem sx={{ "& svg": { mr: 2 } }}>
          <Icon icon="mdi:delete-outline" fontSize={20} />
          Delete
        </MenuItem>
      </Menu>
    </>
  );
};

const columns: GridColDef[] = [
  {
    flex: 0.05,
	  minWidth: 150,
    field: "dateTime",
    headerName: "日付",
    renderCell: ({ row }: CellType) => {
      return (
        <Typography noWrap variant="body2">
          {row.dateTime}
        </Typography>
      );
    },
  },
  {
    flex: 0.1,
	  minWidth: 200,
    field: "scheduleName",
    headerName: "スケジュール名 顧客種別",
    renderCell: ({ row }: CellType) => {
      return (
        <Typography noWrap variant="body2">
          {row.scheduleName}
        </Typography>
      );
    },
  },
  {
    flex: 0.2,
    field: "customer",
    minWidth: 150,
    headerName: "顧客",
    renderCell: ({ row }: CellType) => {
      return (
        <Typography noWrap variant="body2">
          {row.customer}
        </Typography>
      );
    },
  },
  {
    flex: 0.1,
    minWidth: 120,
    headerName: "ゴミ品目",
    field: "waste",
    renderCell: ({ row }: CellType) => {
      return (
        <Typography
          variant="subtitle1"
          noWrap
          sx={{ textTransform: "capitalize" }}
        >
          {row.waste}
        </Typography>
      );
    },
  },
  {
    flex: 0.1,
    minWidth: 120,
    headerName: "ルート名",
    field: "route",
    renderCell: ({ row }: CellType) => {
      return (
        <Typography
          variant="subtitle1"
          noWrap
          sx={{ textTransform: "capitalize" }}
        >
          {row.route}
        </Typography>
      );
    },
  },
  {
    flex: 0.1,
    minWidth: 120,
    headerName: "担当者",
    field: "personInChange",
    renderCell: ({ row }: CellType) => {
      return (
        <Typography
          variant="subtitle1"
          noWrap
          sx={{ textTransform: "capitalize" }}
        >
          {row.personInChange}
        </Typography>
      );
    },
  },
  {
    flex: 0.1,
    minWidth: 120,
    headerName: "担当車両",
    field: "vehicleInChange",
    renderCell: ({ row }: CellType) => {
      return (
        <Typography
          variant="subtitle1"
          noWrap
          sx={{ textTransform: "capitalize" }}
        >
          {row.vehicleInChange}
        </Typography>
      );
    },
  },
  {
    flex: 0.12,
    minWidth: 120,
    headerName: "回収",
    field: "collection",
    renderCell: ({ row }: CellType) => {
      return (
        <Typography
          variant="subtitle1"
          sx={{ textTransform: "capitalize", width: '100%'}}
        >
          {row.collection}
          <Icon icon="ri-file-list-line" style={{ float:"right"}} ></Icon>
        </Typography>
      );
    },
  },
];

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

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

const Schedule = () => {
  // ** State
  const [paginationModel, setPaginationModel] = useState({
    page: 0,
    pageSize: 10,
  });

  // ** Hooks
  const dispatch = useDispatch<AppDispatch>();

  const [skin, setSkin] = useState<string>("");
  const [dateStart, setDateStart] = useState<DateType>(new Date())
  const [dateEnd, setDateEnd] = useState<DateType>(new Date())

  const [value, setValue] = useState<string>('checked')

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

  const store = [
    {
      id: 1,
      dateTime: "2024/08/02",
      scheduleName: "江東区ルート１事業系",
      customer: "独立行政法人石油天然ガス金属鉱物資源機構",
      waste: "可燃、不燃",
      route: "夏季ルート",
      personInChange: "山田かずお伊藤ゆう",
      vehicleInChange: "クリーン１号クリーン２号",
      collection: "10/15",
    },
    {
      id: 2,
      dateTime: "2024/08/02",
      scheduleName: "江東区ルート１事業系",
      customer: "独立行政法人石油天然ガス金属鉱物資源機構",
      waste: "可燃、不燃",
      route: "夏季ルート",
      personInChange: "山田かずお伊藤ゆう",
      vehicleInChange: "クリーン１号クリーン２号",
      collection: "10/15",
    },
    {
      id: 3,
      dateTime: "2024/08/02",
      scheduleName: "江東区ルート１事業系",
      customer: "独立行政法人石油天然ガス金属鉱物資源機構",
      waste: "可燃、不燃",
      route: "夏季ルート",
      personInChange: "山田かずお伊藤ゆう",
      vehicleInChange: "クリーン１号クリーン２号",
      collection: "10/15",
    },
  ];

  return (
    <Grid container spacing={6}>
      <Grid item xs={12}>
        <Card>
          <Box
            sx={{
              p: 5,
              pb: 3,
              display: "flex",
              flexWrap: "wrap",
              alignItems: "center",
              justifyContent: "space-between",
              fontSize : '24px',
            }}
          >
            <span className="mr-4 mb-2" >スケジュール</span>

            <Box
              sx={{ display: "flex", flexWrap: "wrap", alignItems: "center" }}
            >
              <Button
                sx={{ mb: 2, mr: 2 }}
                variant="contained"
                href="/schedule/add/"
              >
                新規登録
              </Button>
              <Button
                sx={{ mb: 2 }}
                variant="contained"
                href="/schedule/add/"
              >
                まとめて登録
              </Button>
            </Box>
          </Box>
		 
          <Box
            sx={{
              p: 5,
              pb: 3,
              display: "flex",
              flexWrap: "wrap",
              alignItems: "center",
              justifyContent: "space-between",
            }}
          >
            <Grid container spacing={5}>
              <Grid item xs={6}>
                <Box sx={{ display: 'flex', flexWrap: 'wrap' }} className='demo-space-x'>
                <div>
                  <DatePickerWrapper>
                    <DatePicker
                    selected={dateStart}
                    id='date-start'
                    customInput={<CustomInputStart />}
                    onChange={(dateStart: Date) => setDateStart(dateStart)}
                    />
                  </DatePickerWrapper>
                </div>
                <span> ~ </span>
                <div>
                  <DatePickerWrapper>
                    <DatePicker
                    selected={dateEnd}
                    id='date-end'
                    customInput={<CustomInputEnd />}
                    onChange={(dateEnd: Date) => setDateEnd(dateEnd)}
                    />
                  </DatePickerWrapper>
                </div>
                </Box>
              </Grid>
              <Grid
                item
                xs={6}
                sx={{
                  justifyContent: "flex-end",
                  display: "flex !important",
                  alignItems: "end",
                }}
              >
                <TextField
				          fullWidth
                  size="medium"
                  type="text"
                  label="キーワード"
                  placeholder="キーワード"
                />
              </Grid>
            </Grid>
          </Box>
          <Box
            sx={{
              p: 5,
              pb: 3,
              display: "flex",
              flexWrap: "wrap",
              alignItems: "center",
              justifyContent: "space-between",
            }}
          >
            <Grid container spacing={5}>
              <Grid item xs={6}>
                <Box sx={{ mb: 4 }}>
                  <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='行政系顧客' />
                    <FormControlLabel value='事業系顧客' control={<Radio />} label='事業系顧客' />
                </RadioGroup>
                </Box>
              </Grid>
              <Grid
                item
                xs={6}
                sx={{
                  justifyContent: "flex-end",
                  display: "flex !important",
                  alignItems: "end",
                }}
              >
                <Box sx={{ mb: 4 }}>
                  <Button
                    sx={{ mb: 2, mr: 2 }}
                    variant="contained"
                    href="/apps/group/add/"
                  >
                    新規登録
                  </Button>
                </Box>
              </Grid>
            </Grid>
            <Grid item xs={12}>
              <DataGrid
                autoHeight
                rows={store}
                columns={columns}
                disableRowSelectionOnClick
                paginationModel={paginationModel}
                onPaginationModelChange={setPaginationModel}
                sx={{ '& .MuiDataGrid-columnHeaders': { borderRadius: 0 } }}
              />
            </Grid>
          </Box>
        </Card>
      </Grid>
    </Grid>
  );
};

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

export default Schedule;