import React from "react";
import { useState } from "react";
import { Box, Button, IconButton, TextField, Typography } from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import SwitchResult from "./SwitchResult";
import ButtonsOptionsForm from "./ButtinsOptionsForm";
import PriceButtons from "./PriceButton";
import DiscountButtons from "./DiscountButtons";
import CustomTextField from "@ui_kit/CustomTextField";
import { OneIcon } from "@icons/questionsPage/OneIcon";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import Info from "@icons/Info";
import ImageAndVideoButtons from "./ImageAndVideoButtons";

export const DescriptionForm = () => {
  const [switchState, setSwitchState] = useState<string>("");
  const [priceButtonsActive, setPriceButtonsActive] = useState<number>(0);
  const [priceButtonsType, setPriceButtonsType] = useState<string>();
  const [forwarding, setForwarding] = useState<boolean>(false);

  const buttonsActive = (index: number, type: string) => {
    setPriceButtonsActive(index);
    setPriceButtonsType(type);
  };

  const SSHC = (data: string) => {
    setSwitchState(data);
  };

  return (
    <Box
      sx={{
        overflow: "hidden",
        maxWidth: "796px",
        height: "100%",
        bgcolor: "#FFFFFF",
        borderRadius: "12px",
        boxShadow: "0px 10px 30px #e7e7e7",
      }}
    >
      <Box sx={{ p: "0 20px", pt: "30px" }}>
        <Box
          sx={{
            width: "100%",
            maxWidth: "760px",
            display: "flex",
            alignItems: "center",
            gap: "10px",
            mb: "19px",
          }}
        >
          <CustomTextField placeholder="Заголовок вопроса" text={""} />
          <IconButton>
            <ExpandMoreIcon />
          </IconButton>
          <OneIcon />
          <PointsIcon style={{ color: "#9A9AAF" }} />
        </Box>

        <Box sx={{ display: "flex" }}>
          <PriceButtons
            ButtonsActive={buttonsActive}
            priceButtonsActive={priceButtonsActive}
          />
          <DiscountButtons />
        </Box>

        <TextField
          fullWidth
          placeholder="Описание"
          sx={{
            "& .MuiInputBase-root": {
              backgroundColor: "#F2F3F7",
              width: "100%",
              height: "110px",
              borderRadius: "10px",
            },
          }}
          inputProps={{
            sx: {
              borderRadius: "10px",
              fontSize: "18px",
              lineHeight: "21px",
              py: 0,
            },
          }}
        />
        <ImageAndVideoButtons />
        {priceButtonsType === "smooth" ? (
          <Box sx={{ mb: "20px" }}>
            <Box sx={{ display: "flex", alignItems: "center", mb: "14xp" }}>
              <Typography
                component={"h6"}
                sx={{ weight: "500", fontSize: "18px" }}
              >
                Призыв к действию
              </Typography>
              <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
                <DeleteIcon style={{ color: "#4D4D4D" }} />
              </IconButton>
            </Box>
            <Box sx={{ display: "flex" }}>
              <TextField
                placeholder="Узнать подробнее"
                fullWidth
                sx={{
                  width: "410px",
                  "& .MuiInputBase-root": {
                    backgroundColor: "#F2F3F7",
                    width: "410px",
                    height: "48px",
                    borderRadius: "10px",
                  },
                }}
                inputProps={{
                  sx: {
                    borderRadius: "10px",
                    fontSize: "18px",
                    lineHeight: "21px",
                    py: 0,
                  },
                }}
              />
              <Button
                onClick={() => setForwarding(true)}
                variant="outlined"
                sx={{
                  display: forwarding ? "none" : "",
                  ml: "20px",
                  mb: "20px",
                }}
              >
                Переадресация +
              </Button>
              {forwarding ? (
                <Box sx={{ ml: "20px", mt: "-36px" }}>
                  <Box
                    sx={{ display: "flex", alignItems: "center", mb: "14xp" }}
                  >
                    <Typography
                      component={"h6"}
                      sx={{ weight: "500", fontSize: "18px" }}
                    >
                      Переадресация
                    </Typography>
                    <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
                      <DeleteIcon style={{ color: "#4D4D4D" }} />
                    </IconButton>
                    <Info />
                  </Box>
                  <Box>
                    <TextField
                      placeholder="https://exemple.ru"
                      fullWidth
                      sx={{
                        "& .MuiInputBase-root": {
                          backgroundColor: "#F2F3F7",
                          width: "326px",
                          height: "48px",
                          borderRadius: "10px",
                        },
                      }}
                      inputProps={{
                        sx: {
                          borderRadius: "10px",
                          fontSize: "18px",
                          lineHeight: "21px",
                          py: 0,
                        },
                      }}
                    />
                  </Box>
                </Box>
              ) : (
                <React.Fragment />
              )}
            </Box>
          </Box>
        ) : (
          <Button variant="outlined" sx={{ mb: "20px" }}>
            Кнопка +
          </Button>
        )}
      </Box>
      <ButtonsOptionsForm switchState={switchState} SSHC={SSHC} />
      <SwitchResult switchState={switchState} totalIndex={0} />
    </Box>
  );
};