import { useState } from "react";
import axios from "axios";
import { Box, IconButton, TextField, Tooltip, Typography } from "@mui/material";
import ModeEditOutlineOutlinedIcon from "@mui/icons-material/ModeEditOutlineOutlined";

interface CardPrivilegie {
  name: string;
  type: string;
  price: string;
  description: string;
  value: string;
  privilegeId: string;
  serviceKey: string;
}

export const СardPrivilegie = ({ name, type, price, description, value, privilegeId, serviceKey }: CardPrivilegie) => {
  const [inputOpen, setInputOpen] = useState<boolean>(false);
  const [inputValue, setInputValue] = useState<string>("");

  const PutPrivilegies = () => {
    axios({
      method: "put",
      url: "https://admin.pena.digital/strator/privilege/",
      data: {
        name: name,
        privilegeId: privilegeId,
        serviceKey: serviceKey,
        description: description,
        type: type,
        value: value,
        price: inputValue,
      },
    });
  };

  const requestOnclickEnter = (event: any) => {
    if (event.key === "Enter" && inputValue !== "") {
      PutPrivilegies();
      setInputValue("");
      setInputOpen(false);
    }
  };

  const onCloseInput = (event: any) => {
    if (event.key === "Escape") {
      setInputOpen(false);
    }
  };

  return (
    <Box
      key={type}
      sx={{
        px: "20px",
        py: "25px",
        backgroundColor: "#F1F2F6",
        display: "flex",
        alignItems: "center",
      }}
    >
      <Box sx={{ display: "flex" }}>
        <Box sx={{ width: "200px", borderRight: "1px solid black" }}>
          <Typography
            variant="h6"
            sx={{
              color: "#fe9903",
              whiteSpace: "nowrap",
            }}
          >
            {name}
          </Typography>
          <Tooltip placement="top" title={description}>
            <IconButton>
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M9.25 9.25H10V14.5H10.75"
                  stroke="#7E2AEA"
                  stroke-width="1.5"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M9.8125 7C10.4338 7 10.9375 6.49632 10.9375 5.875C10.9375 5.25368 10.4338 4.75 9.8125 4.75C9.19118 4.75 8.6875 5.25368 8.6875 5.875C8.6875 6.49632 9.19118 7 9.8125 7Z"
                  fill="#7E2AEA"
                />
              </svg>
            </IconButton>
          </Tooltip>
          <IconButton onClick={() => setInputOpen(!inputOpen)}>
            <ModeEditOutlineOutlinedIcon />
          </IconButton>
        </Box>
      </Box>
      <Box sx={{ width: "600px", display: "flex", justifyContent: "space-around" }}>
        {inputOpen ? (
          <TextField
            type="number"
            onKeyDown={onCloseInput}
            onKeyPress={requestOnclickEnter}
            placeholder="введите число"
            fullWidth
            onChange={(event) => setInputValue(event.target.value)}
            sx={{
              alignItems: "center",
              width: "400px",
              "& .MuiInputBase-root": {
                backgroundColor: "#F2F3F7",
                height: "48px",
              },
            }}
            inputProps={{
              sx: {
                borderRadius: "10px",
                fontSize: "18px",
                lineHeight: "21px",
                py: 0,
              },
            }}
          />
        ) : (
          <Typography sx={{ color: "black", mr: "5px" }}>price: {price}</Typography>
        )}
        <Typography sx={{ color: "black" }}>{type}</Typography>
      </Box>
    </Box>
  );
};