import React, { useEffect, useState } from "react";

import { apiRequest } from "@api/request";

import { useNotification } from "@hooks/useNotification";

import BaseButton from "@components/Common/BaseButton/BaseButton";
import { Footer } from "@components/Common/Footer/Footer";
import { Loader } from "@components/Common/Loader/Loader";
import { Navigation } from "@components/Navigation/Navigation";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";

import tgSettingsIcon from "assets/icons/tgSettingsIcon.svg";
import astral from "assets/images/logo/astralLogo.png";
import kontur from "assets/images/logo/konturLogo.png";

import "./partnerSettings.scss";

export const PartnerSettings = () => {
  const { showNotification } = useNotification();
  const [tgToken, setTgToken] = useState();
  const [inputsValue, setInputsValue] = useState({
    name: "",
    oldPassword: "",
    password: ""
  });

  const [inputsError, setInputsError] = useState({
    name: false,
    password: false
  });

  const [loader, setLoader] = useState(false);
  const [tgLoader, setTgLoader] = useState(false);

  // useEffect(() => {
  //   apiRequest("/user-tg-bot/get-token", {
  //     method: "GET"
  //   }).then((data) => {
  //     setTgToken(data.token);
  //   });
  // }, []);

  const setSettings = () => {
    if (inputsValue.name.length < 2) {
      setInputsError((prevValue) => ({ ...prevValue, name: true }));
      return;
    }
    if (inputsValue.password.length < 6 || inputsValue.oldPassword.length < 6) {
      setInputsError(() => ({ name: false, password: true }));
      return;
    }
    setLoader(true);
    apiRequest("/user/change-personal-data", {
      method: "PUT",
      data: {
        newUsername: inputsValue.name
      }
    }).then((data) => {
      apiRequest("/user/change-password", {
        method: "PUT",
        data: {
          password: inputsValue.oldPassword,
          newPassword: inputsValue.password
        }
      }).then((data) => {
        setLoader(false);
        if (data.status === "success") {
          setInputsError({
            name: false,
            password: false
          });
          setInputsValue({
            name: "",
            oldPassword: "",
            password: ""
          });
          showNotification({
            show: true,
            text: "Данные изменены",
            type: "success"
          });
        } else {
          showNotification({
            show: true,
            text: "Неверные данные",
            type: "error"
          });
        }
      });
    });
  };

  const handleGenerate = async () => {
    if (tgToken == undefined) {
      setTgLoader(true);
      apiRequest("/user-tg-bot/get-token", {
        method: "GET"
      }).then((data) => {
        setTgToken(data.token);
        showNotification({
          show: true,
          text: "Телеграм токен успешно сгенерирован",
          type: "success"
        });
        setTgLoader(false);
      });
    }
  };

  const handleCopy = async () => {
    if (tgToken !== undefined) {
      try {
        await navigator.clipboard.writeText(tgToken);
        showNotification({
          show: true,
          text: "Телеграм токен успешно скопирован",
          type: "success"
        });
      } catch (err) {
        showNotification({
          show: true,
          text: "Ошибка копирования",
          type: "error"
        });
      }
    } else {
      showNotification({
        show: true,
        text: "Необходимо сгенерировать код",
        type: "error"
      });
    }
  };

  return (
    <div className="settings">
      <ProfileHeader />
      <Navigation />
      <div className="container settings__page">
        <ProfileBreadcrumbs
          links={[
            { name: "Главная", link: "/profile" },
            { name: "Настройки", link: "/profile/settings" }
          ]}
        />
        <div className="partner-settings">
          <h2 className="info-personal__title">Настройки профиля</h2>
          <div className="partner-settings__body">
            <div className="partner-settings__login">
              <h3 className="settings__title">Вход в систему</h3>

              <p className="settings__label">Изменение логина</p>
              <div className="settings__input">
                <input
                  className={inputsError.name ? "warning" : ""}
                  placeholder="Имя"
                  onChange={(e) => {
                    setInputsValue((prevValue) => ({
                      ...prevValue,
                      name: e.target.value
                    }));
                    setInputsError((prevValue) => ({
                      ...prevValue,
                      name: false
                    }));
                  }}
                  value={inputsValue.name}
                />
                {inputsError.name && (
                  <span className="error">Минимум 2 символа</span>
                )}
              </div>

              <p className="settings__label">Изменение пароля</p>
              <div className="settings__input old-password">
                <input
                  className={inputsError.password ? "warning" : ""}
                  placeholder="Старый пароль"
                  type={"password"}
                  onChange={(e) => {
                    setInputsValue((prevValue) => ({
                      ...prevValue,
                      oldPassword: e.target.value
                    }));
                    setInputsError((prevValue) => ({
                      ...prevValue,
                      password: false
                    }));
                  }}
                  value={inputsValue.oldPassword}
                />
                {inputsError.password && (
                  <span className="error">Введите верный пароль</span>
                )}
              </div>
              <div className="settings__input">
                <input
                  className={inputsError.password ? "warning" : ""}
                  placeholder="Новый пароль"
                  type={"password"}
                  onChange={(e) => {
                    setInputsValue((prevValue) => ({
                      ...prevValue,
                      password: e.target.value
                    }));
                    setInputsError((prevValue) => ({
                      ...prevValue,
                      password: false
                    }));
                  }}
                  value={inputsValue.password}
                />
                {inputsError.password && (
                  <span className="error">Минимум 6 символов</span>
                )}
              </div>

              <div className="settings__buttons">
                <BaseButton styles={"settings__buttons-cancel"}>
                  Отмена
                </BaseButton>
                {loader ? (
                  <Loader style={"green"} width={"40px"} height={"40px"} />
                ) : (
                  <BaseButton
                    onClick={setSettings}
                    styles={"settings__buttons-save"}
                  >
                    Сохранить
                  </BaseButton>
                )}
              </div>
              <span className="settings__agreement">
                Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и
                использования персональных данных
              </span>
            </div>

            <div className="partner-settings__report">
              <h3 className="settings__title">Телеграмм бот</h3>

              <p className="settings__label">Тelegram токен</p>
              <div className="settings__input">
                <span>{tgToken}</span>
              </div>

              <div className="settings__buttons">
                {tgLoader ? (
                  <Loader style={"green"} width={"40px"} height={"40px"} />
                ) : (
                  <BaseButton
                    onClick={handleGenerate}
                    styles={"settings__buttons-save"}
                  >
                    Сгенерировать
                  </BaseButton>
                )}
                <BaseButton
                  onClick={handleCopy}
                  styles={"settings__buttons-save"}
                >
                  Скопировать
                </BaseButton>
              </div>
              <div className="settings__agreement-tg">
                <a href="#" target="_blank" rel="noopener noreferrer">
                  <img src={tgSettingsIcon} alt="" />
                </a>
                Ссылка на телеграм бот с инструкцией
              </div>
            </div>
            {/* <div className="partner-settings__report">
              <h3 className="settings__title">Документы и отчеты</h3>
              <p className="settings__label">Изменить провадера ЭДО</p>

              <div className="partner-settings__logo">
                <div>
                  <label className="partner-settings__label">
                    <img src={astral}></img>
                    <input type="checkbox" />
                    <span className="checkbox"></span>
                  </label>
                </div>
                <div>
                  <label className="partner-settings__label">
                    <img src={kontur}></img>
                    <input type="checkbox" />
                    <span className="checkbox"></span>
                  </label>
                </div>
              </div>

              <p className="settings__label">Изменение названия компании</p>
              <div className="settings__input">
                <input></input>
              </div>

              <div className="settings__buttons">
                <BaseButton styles={"settings__buttons-cancel"}>
                  Отмена
                </BaseButton>
                <BaseButton styles={"settings__buttons-save"}>
                  Сохранить
                </BaseButton>
              </div>
              <span className="settings__agreement">
                Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и
                использования персональных данных
              </span>
            </div> */}
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
};

export default PartnerSettings;