// ** React Imports
import { useState, useEffect } from "react";

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

// ** MUI Imports
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid";
import { styled } from "@mui/material/styles";
import MenuItem from "@mui/material/MenuItem";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import Button from '@mui/material/Button'

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

// ** Custom Table Components Imports
import { FormControl } from "@mui/material";
import InputLabel from "@mui/material/InputLabel";

import List from '@mui/material/List'
import ListItem from '@mui/material/ListItem'
import ListItemIcon from '@mui/material/ListItemIcon'
import ListItemText from '@mui/material/ListItemText'

import DialogAlert from "src/views/components/dialogs/DialogAlert";

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 RootDuplicate = () => {
  // ** State
  const [statusValue1, setStatusValue1] = useState<string>("");
  const [statusValue2, setStatusValue2] = useState<string>("");
  const [statusValue3, setStatusValue3] = useState<string>("");
  const [statusValue4, setStatusValue4] = useState<string>("");

  const handleStatusValue1 = (e: SelectChangeEvent) => {
    setStatusValue1(e.target.value);
  };

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

  const handleStatusValue3 = (e: SelectChangeEvent) => {
    setStatusValue3(e.target.value);
  };

  const handleStatusValue4 = (e: SelectChangeEvent) => {
    setStatusValue4(e.target.value);
  };

  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>

          <Box
            sx={{
              p: 5,
              pb: 3,
              display: "flex",
              flexWrap: "wrap",
              alignItems: "center",
              justifyContent: "space-between",
            }}
          >
            <Grid container spacing={5}>
              <Grid item xs={6}>
                <FormControl size="medium" fullWidth>
                  <InputLabel id="invoice-status-select">企業（複製元）</InputLabel>
                  <Select
                    sx={{ pr: 4 }}
                    value={statusValue1}
                    label="企業（複製元）"
                    onChange={handleStatusValue1}
                    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}>
                <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}>
                <FormControl size="medium" fullWidth>
                  <InputLabel id="invoice-status-select">企業（複製先）</InputLabel>
                  <Select
                    sx={{ pr: 4 }}
                    value={statusValue3}
                    label="企業（複製先）"
                    onChange={handleStatusValue3}
                    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}>
                <FormControl size="medium" fullWidth>
                  <InputLabel id="invoice-status-select">顧客（複製先）</InputLabel>
                  <Select
                    sx={{ pr: 4 }}
                    value={statusValue4}
                    label="顧客（複製先）"
                    onChange={handleStatusValue4}
                    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>
              <List sx={{mt:5, spacing:6}}>
                <InputLabel sx={{mb:5}}>注意書きなどあれば</InputLabel>
                <ListItem disablePadding>
                    <ListItemIcon>
                      <Icon icon='mdi-checkbox-blank-circle' width={10} />
                    </ListItemIcon>
                    <ListItemText primary='メモメモメモ' />
                </ListItem>
                <ListItem disablePadding>
                    <ListItemIcon>
                      <Icon icon='mdi-checkbox-blank-circle' width={10} />
                    </ListItemIcon>
                    <ListItemText primary='メモメモメモ' />
                </ListItem>
                <ListItem disablePadding>
                    <ListItemIcon>
                      <Icon icon='mdi-checkbox-blank-circle' width={10} />
                    </ListItemIcon>
                    <ListItemText primary='メモメモメモ' />
                </ListItem>
              </List>
            <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>
          </Box>
        </Card>
      </Grid>
      <DialogAlert title="本当に削除してもよろしいですか？" messageContent="注意がきがあればメモメモメモメモメモメモメモメモメモ" textBtnConfirm="削除する"></DialogAlert>
    </Grid>
  );
};

RootDuplicate.acl = {
  action: "manage",
  subject: "group_admin",
};

export default RootDuplicate;