import React, { FC, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Card, Section, Aligment, Text, Selector, Dropdown } from "venice-ui";
import {
  Content,
  ContentFull,
  ContentWrapper,
  OrgDetailsLoader,
} from "../components";
import packageJson from "../../../package.json";
import { getLang, t } from "../../helpers/userHelper";
import { apiCall } from "../../untils/apiCall";
import { dictionary } from "../../untils/dictionary";
import { useStoreActions, useStoreState } from "../../store";
import { SettingRow } from "./SettingsRow";
import { LoadingContent } from "../layouts/Loading";
import { MEMBER_ROLE } from "../../definitions/organizations";

export const Settings: FC = () => {
  const langScope = [
    { label: "English", value: "en" },
    { label: "Polski", value: "pl" },
  ];
  const navigate = useNavigate();

  const { email, uid, orgRole, orgID, lang } = useStoreState(
    (state) => state.user.userDetails,
  );
  const { setLang } = useStoreActions((actions) => actions.user);

  const [pageData, setPageData] = useState({
    loading: true,
    isLastAdmin: false,
  });

  useEffect(() => {
    if (orgRole === MEMBER_ROLE.admin) {
      const options = {
        orgID: orgID,
        userID: uid,
      };
      apiCall("organization/isLastAdmin", options, (response: any) => {
        setPageData({
          loading: false,
          isLastAdmin: response.isLastAdmin,
        });
      });
    } else {
      setPageData({
        loading: false,
        isLastAdmin: false,
      });
    }
  }, []);

  const handleSetLang = async (name: string, value: string | number) => {
    const options = {
      userID: uid,
      lang: value,
    };
    await apiCall("user/setLang", options, (response: any) => {
      setLang(value as string);
      sessionStorage.setItem("lang", getLang(value as string));
    });
  };

  if (pageData.loading) {
    return (
      <Aligment direction="column">
        <OrgDetailsLoader>
          <ContentFull>
            <LoadingContent />
          </ContentFull>
        </OrgDetailsLoader>
      </Aligment>
    );
  }

  return (
    <Content>
      <Card
        title={t(dictionary.setting)}
        handleBack={() => navigate(-1)}
        shadow={false}
      >
        <ContentWrapper componentHeight="calc(100vh - 11.4rem)">
          <Aligment direction="row">
            <Section
              //ToDo check this padding
              //  noHorizontalPadding={true}
              title={t(dictionary.account)}
            >
              <Aligment direction="column" align="flex-start">
                <SettingRow title={t(dictionary.email)}>
                  <Text>{email}</Text>
                </SettingRow>
              </Aligment>
            </Section>
            <Section
              //ToDo check this padding
              //  noHorizontalPadding={true}
              title={t(dictionary.appSettings)}
            >
              <SettingRow title={t(dictionary.lang)}>
                <Dropdown
                  options={langScope}
                  value={lang}
                  handleChange={handleSetLang}
                  name={"lang"}
                />
              </SettingRow>
            </Section>
            {t(dictionary.appVersion)}: {packageJson.version}
          </Aligment>
        </ContentWrapper>
      </Card>
    </Content>
  );
};