import React from "react";
import { useState } from "react";
import { Box, IconButton, TextField, Typography } from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";

import CustomButton from "../CustomButton";

import SwitchAnswerOptions from "./SwitchAnswerOptions";
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={{
        width: "796px",
        height: "100%",
        bgcolor: "#FFFFFF",
        borderRadius: "12px",
      }}
    >
      <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 />
        </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 />
              </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,
                  },
                }}
              />
              <CustomButton
                onClick={() => setForwarding(true)}
                variant="contained"
                sx={{
                  display: forwarding ? "none" : "",
                  ml: "20px",
                  mb: "20px",
                  color: "#9A9AAF",
                  backgroundColor: "#F2F3F7",
                  width: "194px",
                  height: "48px",
                  border: "1px solid #9A9AAF",
                }}
              >
                Переадрисация +
              </CustomButton>
              {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 />
                    </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>
        ) : (
          <CustomButton
            variant="contained"
            sx={{
              mb: "20px",
              color: "#9A9AAF",
              backgroundColor: "#F2F3F7",
              width: "119px",
              height: "48px",
              border: "1px solid #9A9AAF",
            }}
          >
            Кнопка +
          </CustomButton>
        )}
      </Box>
      <ButtonsOptionsForm switchState={switchState} SSHC={SSHC} />
      <SwitchAnswerOptions switchState={switchState} />
    </Box>
  );
};