import * as React from "react";
import { Box, Typography, TextField, Checkbox, Button } from "@mui/material";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import dayjs, { Dayjs } from "dayjs";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { DesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableRow from "@mui/material/TableRow";
import TableContainer from "@mui/material/TableContainer";
import Paper from "@mui/material/Paper";
import { DataGrid, GridColDef, GridSelectionModel, GridToolbar } from "@mui/x-data-grid";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import theme from "../../../../theme";


const columns: GridColDef[] = [
  { 
    field: "id", 
    headerName: "ID", 
    width: 30,
    sortable: false,
  },
  {
    field: "name",
    headerName: "Название промокода",
    width: 200,
    sortable: false,
  },
  {
    field: "terms",
    headerName: "Условия",
    width: 210,
    sortable: false,
  },
  {
    field: "time",
    headerName: "Срок действия",
    type: "number",
    width: 110,
    sortable: false,
  }
];

const rows = [
  { id: 1, name: "Промокод 1", terms: "Первое, второе, третье", time: "200 дней" },
  { id: 2, name: "Промокод 2", terms: "Первое, второе, третье", time: "200 дней" },
  { id: 3, name: "Промокод 3", terms: "Первое, второе, третье", time: "200 дней" },
];

const Promocode: React.FC = () =>  {
  const [value1, setValue1] = React.useState<Dayjs | null>();
  const handleChange1 = (newValue: Dayjs | null) => {
    setValue1(newValue);
  };

  const [value2, setValue2] = React.useState<Dayjs | null>();
  const handleChange2 = (newValue: Dayjs | null) => {
    setValue2(newValue);
  };

  const [service, setService] = React.useState("Шаблонизатор");
  const handleChange = (event: SelectChangeEvent) => {
    setService(event.target.value as string);
  };

  return (
    <React.Fragment>
       <LocalizationProvider dateAdapter={AdapterDayjs}>
        <Typography 
          variant="subtitle1"  
          sx={{
            width: "90%",
            height: "60px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            color: theme.palette.secondary.main
        }}>
          ПРОМОКОД
        </Typography>

        <Box sx={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "left",
          alignItems: "left",
          marginTop: "15px",
        }}>
          <Typography 
            variant="h4"  
            sx={{
              width: "90%",
              height: "40px",
              fontWeight: "normal",
              color: theme.palette.grayDisabled.main,
              marginTop: "35px"
          }}>
            Название:
          </Typography>
          <TextField
            id = "standard-basic"
            label = { "" }
            variant = "filled"
            color = "secondary"
            sx={{
              width: "200px",
              height: "30px",
              marginTop: "-20px"
            }}
            InputProps={{
              style: {
                backgroundColor: theme.palette.content.main,
                color: theme.palette.secondary.main,
              } }} 
            InputLabelProps={{
              style: {
                color: theme.palette.secondary.main
              } }} 
            //inputRef={ fieldName }
          />

          <Typography 
            variant="h4"  
            sx={{
              width: "90%",
              height: "40px",
              fontWeight: "normal",
              color: theme.palette.grayDisabled.main,
              marginTop: "75px"
          }}>
            Условия:
          </Typography>

          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={service}
            label="Age"
            onChange={handleChange}
            sx={{ 
              color: theme.palette.secondary.main,
              border: "1px solid",
              borderColor: theme.palette.secondary.main,
              "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
                borderColor: theme.palette.secondary.main
              },
              ".MuiSvgIcon-root ": {
                fill: theme.palette.secondary.main,
              }
            }}
          >
            <MenuItem value={"Шаблонизатор"}>Шаблонизатор</MenuItem>
            <MenuItem value={"Опросник"}>Опросник</MenuItem>
            <MenuItem value={"Аналитика сокращателя"}>Аналитика сокращателя</MenuItem>
            <MenuItem value={"АБ тесты"}>АБ тесты</MenuItem>
          </Select>

          <TextField
            id = "standard-basic"
            label = { "Процент скидки" }
            variant = "filled"
            color = "secondary"
            sx={{
              marginTop: "15px"
            }}
            InputProps={{
              style: {
                backgroundColor: theme.palette.content.main,
                color: theme.palette.secondary.main,
              } }} 
            InputLabelProps={{
              style: {
                color: theme.palette.secondary.main
              } }} 
            //inputRef={ fieldName }
          />

          <TableContainer component={Paper} sx={{ 
            width: "100%", 
            marginTop: "35px",
            backgroundColor: theme.palette.content.main
          }}>
            <Table sx={{ minWidth: 650, }} aria-label="simple table">
              <TableBody>
                <TableRow sx={{ border: "1px solid white" }} >
                  <TableCell component="th" scope="row" sx={{ color: theme.palette.secondary.main }}>
                    Работает, если заплатите 100500 денег
                  </TableCell>
                </TableRow>
                <TableRow sx={{ border: "1px solid white" }} >
                  <TableCell component="th" scope="row" sx={{ color: theme.palette.secondary.main }}>
                    Вы должны будете продать душу дьяволу
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </TableContainer>

          <Typography 
            variant="h4"  
            sx={{
              width: "90%",
              height: "40px",
              fontWeight: "normal",
              color: theme.palette.grayDisabled.main,
              marginTop: "55px"
          }}>
            Дата действия:
          </Typography>
          
          <Box sx={{ 
            width: "90%",
            display: "flex"
          }}>
            <Typography sx={{
              width: "35px",
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "left",
            }}>С</Typography>

            <DesktopDatePicker
              inputFormat="MM/DD/YYYY"
              value={value1}
              onChange={handleChange1}
              renderInput={(params) => <TextField {...params} />}
              InputProps={{ sx: { 
                height: "40px",
                color: theme.palette.secondary.main,
                border: "1px solid",
                borderColor: theme.palette.secondary.main,
                "& .MuiSvgIcon-root": { color: theme.palette.secondary.main }
              } }}
            />

            <Typography sx={{
              width: "65px",
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
            }}>по</Typography>

            <DesktopDatePicker
              inputFormat="MM/DD/YYYY"
              value={value2}
              onChange={handleChange2}
              renderInput={(params) => <TextField {...params} />}
              InputProps={{ sx: { 
                height: "40px",
                color: theme.palette.secondary.main,
                border: "1px solid",
                borderColor: theme.palette.secondary.main,
                "& .MuiSvgIcon-root": { color: theme.palette.secondary.main }
              } }}
            />
          </Box>


          <Box sx={{
            display: "flex",
            width: "90%",
            marginTop: theme.spacing(2),
          }}>
            <Box sx={{ 
              width: "20px",
              height: "42px",
              display: "flex",
              flexDirection: "column",
              justifyContent: "left",
              alignItems: "left",
              marginRight: theme.spacing(1)
            }}>
              <Checkbox sx={{ 
                color: theme.palette.secondary.main,
                "&.Mui-checked": {
                  color: theme.palette.secondary.main,
                },
              }} />
            </Box>
            <Box sx={{ 
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center"
            }}>
              Бессрочно
            </Box>
          </Box>

          <Box sx={{ 
            width: "90%",
            marginTop: "55px",
            alignItems: "left"
          }}>
            <Button 
              variant = "contained"
              sx={{
                backgroundColor: theme.palette.menu.main,
                height: "52px",
                fontWeight: "normal",
                fontSize: "17px",
                "&:hover": {
                  backgroundColor: theme.palette.grayMedium.main
                }
              }}>
                Cоздать
            </Button>
          </Box>
        
        </Box>

        <Box style={{ width: "80%", marginTop: "35px" }}>
          <Box style={{ height: 400 }}>
            <DataGrid 
              checkboxSelection={true} 
              rows={ rows }
              columns={columns}
              sx={{
                color: theme.palette.secondary.main,
                "& .MuiDataGrid-iconSeparator": {
                  display: "none"
                },
                "& .css-levciy-MuiTablePagination-displayedRows": {
                  color: theme.palette.secondary.main
                },
                "& .MuiSvgIcon-root": {
                  color: theme.palette.secondary.main
                },
                "& .MuiTablePagination-selectLabel": {
                  color: theme.palette.secondary.main
                },
                "& .MuiInputBase-root": {
                  color: theme.palette.secondary.main
                },
                "& .MuiButton-text": {
                  color: theme.palette.secondary.main
                },
              }}
              components={{ Toolbar: GridToolbar }}
              onSelectionModelChange={ (ids) => console.log("datagrid select") }
            />
          </Box>
        </Box>
      
      </LocalizationProvider>
    </React.Fragment>
  );
}


export default Promocode;