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 theme from "../../../../theme";


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);
  };

  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>


        <Typography 
          variant="h4"  
          sx={{
            width: "90%",
            height: "40px",
            fontWeight: "normal",
            color: theme.palette.grayDisabled.main,
            marginTop: "65px"
        }}>
          Название:
        </Typography>
        <Typography 
          variant="h6"  
          sx={{
            width: "90%",
            height: "60px",
            fontWeight: "normal",
            color: theme.palette.secondary.main
        }}>
          GJ58HG6GG
        </Typography>


        <Typography 
          variant="h4"  
          sx={{
            width: "90%",
            height: "40px",
            fontWeight: "normal",
            color: theme.palette.grayDisabled.main,
            marginTop: "35px"
        }}>
          Условия:
        </Typography>
        <Typography 
          variant="h6"  
          sx={{
            width: "90%",
            height: "60px",
            fontWeight: "normal",
            color: theme.palette.secondary.main
        }}>
          Работает, если заплатите 100500 денег
        </Typography>


        <Typography 
          variant="h4"  
          sx={{
            width: "90%",
            height: "40px",
            fontWeight: "normal",
            color: theme.palette.grayDisabled.main,
            marginTop: "35px"
        }}>
          Дата действия:
        </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>
      
      </LocalizationProvider>
    </React.Fragment>
  );
}


export default Promocode;