adminFront/src/Components/LoggedIn/Content/Promocode/index.tsx

import * as React from "react";
import { Box, Typography, TextField, Checkbox, Button } from "@mui/material";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
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 MenuItem from "@mui/material/MenuItem";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import { PrivilegesProps, PromocodeProps } from "./types";
import useStore, { StoreState } from "../../../../store";
import theme from "../../../../theme";


const columns: GridColDef[] = [
  { 
    field: "id", 
    headerName: "ID", 
    width: 30,
    sortable: false,
  },
  {
    field: "name",
    headerName: "Название промокода",
    width: 200,
    sortable: false,
  },
  {
    field: "endless",
    headerName: "Бесконечный",
    width: 120,
    sortable: false,
  },
  {
    field: "from",
    headerName: "От",
    width: 120,
    sortable: false,
  },
  {
    field: "dueTo",
    headerName: "До",
    width: 120,
    sortable: false,
  },
  {
    field: "privileges",
    headerName: "Привилегии",
    width: 210,
    sortable: false,
  }
];

const rows:Array<PromocodeProps> = [
  { id: 1, name: "Промокод 1", endless: false, from: "", dueTo: "", privileges: [ 
    { 
      good: "Товар 1", 
      discount: 0.3
    },
    { 
      good: "Товар 2", 
      discount: 0.2
    }
   ] },
   { id: 2, name: "Промокод 2", endless: false, from: "", dueTo: "", privileges: [ 
    { 
      good: "Товар 3", 
      discount: 0.3
    },
    { 
      good: "Товар 4", 
      discount: 0.2
    }
   ] },
   { id: 3, name: "Промокод 3", endless: false, from: "", dueTo: "", privileges: [ 
    { 
      good: "Товар 5", 
      discount: 0.3
    },
    { 
      good: "Товар 6", 
      discount: 0.2
    }
   ] },
];

const Promocode: React.FC = () =>  {
  const [checkboxState, setCheckboxState] = React.useState<boolean>(false);
  const toggleCheckbox = () => { setCheckboxState( !checkboxState ); }

  const [value1, setValue1] = React.useState<Date>( new Date() );
  const [value2, setValue2] = React.useState<Date>( new Date() );

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

  const { promocodeArray, promocodeArraySet } = useStore<StoreState>((state) => state);
  
  const promocodeArrayConverted = promocodeArray.map( (item) => {
    const dateFrom = item.from ? new Date( Number(item.from) ) : "";
    const dateDueTo = item.from ? new Date( Number(item.dueTo) ) : "";

    const strFrom = dateFrom 
      ? `${dateFrom.getDate()}.${dateFrom.getMonth()}.${dateFrom.getFullYear()}`
      : "-"

    const strDueTo = dateDueTo 
      ? `${dateDueTo.getDate()}.${dateDueTo.getMonth()}.${dateDueTo.getFullYear()}`
      : "-"

    if( item.privileges.length )  { 
      const result = item.privileges.reduce( (acc, privilege) => {
        acc = acc 
          ? `${acc}, ${privilege.good} - ${privilege.discount}%` 
          : `${privilege.good} - ${privilege.discount * 100}%`;

        return acc;
      }, "" );

      return { ...item, privileges: result, from: strFrom, dueTo: strDueTo }
    } else {
      return { ...item, from: strFrom, dueTo: strDueTo }
    }
  } );

  const createPromocode = ( name:string, discount: number ) => {
    const newPromocode = { 
      id: new Date().getTime(), 
      name, 
      endless: checkboxState, 
      from: checkboxState ? "" : new Date( value1 ).getTime() +"", 
      dueTo: checkboxState ? "" : new Date( value2 ).getTime() +"", 
        privileges: [{
          good: service,
          discount: discount / 100
        }] 
    }

    const promocodeArrayUpdated = [ ...promocodeArray, newPromocode ];
    promocodeArraySet( promocodeArrayUpdated );
  }

  const fieldName = React.useRef<HTMLInputElement | null>(null);
  const fieldDiscount = React.useRef<HTMLInputElement | null>(null);

  const checkFields = () => {
    if( fieldName.current != null && fieldDiscount.current != null )  {
      createPromocode( fieldName.current.value, Number(fieldDiscount.current.value) );
    }
  }

  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={ fieldDiscount }
          />

          <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="DD/MM/YYYY"
              value={ value1 }
              onChange={ (e) => { if(e) { setValue1(e) } } }
              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="DD/MM/YYYY"
              value={ value2 }
              onChange={ (e) => { if(e) { setValue2(e) } } }
              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,
                },
              }} onClick={ () => toggleCheckbox() } />
            </Box>
            <Box sx={{ 
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center"
            }}>
              Бессрочно
            </Box>
          </Box>

          <Box sx={{ 
            width: "90%",
            marginTop: "55px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center"
          }}>
            <Button 
              variant = "contained"
              sx={{
                backgroundColor: theme.palette.menu.main,
                height: "52px",
                fontWeight: "normal",
                fontSize: "17px",
                "&:hover": {
                  backgroundColor: theme.palette.grayMedium.main
                }
              }}
              onClick={ () => checkFields() } >
                Cоздать
            </Button>
          </Box>
        
        </Box>

        <Box style={{ width: "80%", marginTop: "55px" }}>
          <Box style={{ height: 400 }}>
            <DataGrid 
              checkboxSelection={true} 
              rows={ promocodeArrayConverted }
              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;