import { FC, useEffect, useState } from "react";
import { Content, InfoContent } from "../components";
import { Card, Aligment, Icon, Text, Loader, Button } from "venice-ui";
import { t } from "../../helpers/userHelper";
import { dictionary } from "../../untils/dictionary";
import { useNavigate } from "react-router-dom";
import { useStoreState } from "../../store";
import { PAYMENT_MODE } from "../../helpers/settingsHelper";
import { Colors } from "../../untils/Theme";

export const PaymentSuccess: FC = () => {
  const { orgStatus } = useStoreState((state) => state.user.userDetails);
  const [loading, setLoading] = useState(true);
  const [countdown, setCountdown] = useState(5);

  const navigate = useNavigate();
  useEffect(() => {
    sessionStorage.removeItem("paymentFlow");
    const interval = setInterval(() => {
      if (!loading) {
        setCountdown((prev) => {
          if (prev <= 1) {
            clearInterval(interval);
            navigate(`/`);
            return 0;
          }
          return prev - 1;
        });
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [loading]);

  useEffect(() => {
    if (orgStatus === PAYMENT_MODE.ACTIVE) {
      setLoading(false);
    }
  }, [orgStatus]);

  return (
    <Content>
      <Card title={t(dictionary.paymentTitleSuccess)} shadow={false}>
        <InfoContent>
          <Aligment direction="column" gap={20}>
            {loading ? (
            //ToDo check color
              <Loader />
            ) : (
              <>
                <Icon
                  name="check_circle"
                  size={'xl4'}
                  color="#4caf50"
                  isActive={false}
                  background="transparent"
                  hoverBackground="transparent"
                />
                <Text>
                  {t(dictionary.paymentContentSuccess)} {countdown}{" "}
                  {t(dictionary.seconds)}
                </Text>
                <Button
                  onClick={() => {
                    navigate("/");
                  }}
                  text={t(dictionary.goToHomePage)}
                />
              </>
            )}
          </Aligment>
        </InfoContent>
      </Card>
    </Content>
  );
};