import { Box, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomButton from "@root/components/CustomButton";
import InputTextfield from "@root/components/InputTextfield";
import SectionWrapper from "@root/components/SectionWrapper";

import Download from "../assets/Icons/Download.svg";
import Account from "../assets/Icons/Account.svg";
import { useState } from "react";

export const AccountSetup = () => {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));

  const [avatar, setAvatar] = useState("");

  const [name, setName] = useState<string>("");
  const [email, setEmail] = useState<string>("");
  const [surname, setSurname] = useState<string>("");
  const [telephone, setTelephone] = useState<string>("");
  const [otchestvo, setOtchestvo] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const [сompanyName, setCompanyName] = useState<string>("");

  console.log(name);
  return (
    <SectionWrapper
      maxWidth="lg"
      sx={{
        mt: "25px",
        mb: "70px",
      }}
    >
      <Typography
        component="div"
        sx={{ fontWeight: "400px", fontSize: "12px", lineHeight: "14px", marginBottom: "19px" }}
      >
        Настройки аккаунта
      </Typography>
      <Box
        sx={{
          mt: "20px",
          mb: "40px",
          display: "flex",
          gap: "10px",
        }}
      >
        <Typography variant="h4">Настройки аккаунта</Typography>
      </Box>

      <Box
        sx={{
          width: "100%",
          backgroundColor: "white",
          display: "flex",
          flexDirection: upMd ? "row" : "column",
          borderRadius: "12px",
          mb: "40px",
          boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
                                0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
                                0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 
                                0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
                                0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
                                0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
        }}
      >
        <Box sx={{ display: "flex", justifyContent: "left", ml: "20px", mt: "20px", mr: "58px" }}>
          <Typography component="image">
            <img src={Account} alt="Account" />
            <CustomButton
              variant="outlined"
              sx={{
                width: "220px",

                color: theme.palette.brightPurple.main,
                borderColor: theme.palette.brightPurple.main,
                mt: "30px",
              }}
            >
              Загрузить фото
            </CustomButton>
          </Typography>
        </Box>
        <Box
          sx={{
            display: "flex",
            flexWrap: "wrap",
            mt: "10px",
            mb: "10px",
            mr: "20px",
            justifyContent: "right",
          }}
        >
          <Typography component="div" sx={{ display: "flex", justifyContent: "left", flexWrap: "wrap" }}>
            <InputTextfield
              TextfieldProps={{
                placeholder: "Имя",
              }}
              onChange={(event) => setName(event.target.value)}
              id="text"
              label="Имя"
              gap={upMd ? "15px" : "10px"}
              color={name ? "#e8badd" : ""}
              FormInputSx={{ width: "50%", paddingLeft: "30px", mt: "19px" }}
            />

            <InputTextfield
              TextfieldProps={{
                placeholder: "username@penahaub.com",

                type: "text",
              }}
              onChange={(event) => setEmail(event.target.value)}
              id="email"
              label="E-mail"
              gap={upMd ? "15px" : "10px"}
              FormInputSx={{ width: "50%", paddingLeft: "30px", mt: "19px" }}
              color={email ? "#e8badd" : ""}
            />

            <InputTextfield
              TextfieldProps={{
                placeholder: "Фамилия",

                type: "text",
              }}
              onChange={(event) => setSurname(event.target.value)}
              id="password"
              label="Фамилия"
              gap={upMd ? "15px" : "10px"}
              FormInputSx={{ width: "50%", paddingLeft: "30px", mt: "19px" }}
              color={surname ? "#e8badd" : ""}
            />

            <InputTextfield
              TextfieldProps={{
                placeholder: "+7 900 000 00 00",
                type: "text",
              }}
              onChange={(enent) => setTelephone(enent.target.value)}
              id="password"
              label="Телефон"
              gap={upMd ? "15px" : "10px"}
              FormInputSx={{ width: "50%", paddingLeft: "30px", mt: "19px" }}
              color={telephone ? "#e8badd" : ""}
            />

            <InputTextfield
              TextfieldProps={{
                placeholder: "Отчество",

                type: "text",
              }}
              onChange={(enent) => setOtchestvo(enent.target.value)}
              id="password"
              label="Отчество"
              gap={upMd ? "15px" : "10px"}
              FormInputSx={{ width: "50%", paddingLeft: "30px", mt: "19px" }}
              color={otchestvo ? "#e8badd" : ""}
            />

            <InputTextfield
              TextfieldProps={{
                placeholder: "Не мение 8 символов",
                type: "password",
              }}
              onChange={(enent) => setPassword(enent.target.value)}
              id="email"
              label="Пароль"
              gap={upMd ? "15px" : "10px"}
              FormInputSx={{ width: "50%", paddingLeft: "30px", mt: "19px" }}
              color={password ? "#e8badd" : ""}
            />

            <InputTextfield
              TextfieldProps={{
                placeholder: "ООО Фирма",
                type: "text",
              }}
              onChange={(enent) => setCompanyName(enent.target.value)}
              id="text"
              label="Название компании"
              gap={upMd ? "15px" : "10px"}
              FormInputSx={{ width: "50%", paddingLeft: "30px", mt: "19px" }}
              color={сompanyName ? " #e8badd" : ""}
            />
            <Box
              sx={{
                display: "flex",
                justifyContent: "left",
                flexWrap: "wrap",
                width: "35%",
                paddingLeft: "30px",
                mt: "25px",
                mb: "17px",
              }}
            >
              <Typography sx={{ display: "flex" }}>
                <img src={Download} alt="Download" />
                <Link
                  href="#"
                  sx={{
                    color: theme.palette.brightPurple.main,
                    whiteSpace: "nowrap",
                    marginLeft: "11px",
                  }}
                >
                  Загрузить документы для юр лиц
                </Link>
              </Typography>

              <Typography sx={{ display: "flex" }}>
                <img src={Download} alt="Download" />
                <Link
                  href="#"
                  sx={{
                    color: theme.palette.brightPurple.main,
                    whiteSpace: "nowrap",
                    marginLeft: "11px",
                    marginTop: "5px",
                  }}
                >
                  Загрузить документы для НКО
                </Link>
              </Typography>
            </Box>
            <Typography component="div" sx={{ width: "100%", display: "flex", justifyContent: "right" }}>
              <CustomButton
                variant="contained"
                sx={{
                  width: "180px",
                  height: "44px",
                  backgroundColor: theme.palette.brightPurple.main,
                  textColor: "white",
                  mb: "20px",
                }}
              >
                Cохранить
              </CustomButton>
            </Typography>
          </Typography>
        </Box>
      </Box>
    </SectionWrapper>
  );
};