import "./Stake.scss";

import { Box, Typography } from "@mui/material";
import SettingsIcon from '@mui/icons-material/Settings';
import { memo, useState, useEffect } from "react";
import { useChainId } from "wagmi";
import { useSearchParams } from "react-router-dom";

import { StakeArea } from "./components/StakeArea";

import GhostStyledIcon from "../../components/Icon/GhostIcon";
import Modal from "../../components/Modal/Modal";
import Paper from "../../components/Paper/Paper";
import TokenStack from "../../components/TokenStack/TokenStack";
import { useTokenSymbol } from "../../hooks/tokens";

const Stake = ({ chainId, address, isOpened, closeModal, connect }) => {
    const [action, setAction] = useState("STAKE");
    const [settingsModalOpen, setSettingsModalOpen] = useState(false);

    const { symbol: ftsoSymbol } = useTokenSymbol(chainId, "FTSO");
    const { symbol: stnkSymbol } = useTokenSymbol(chainId, "STNK");
    const { symbol: ghstSymbol } = useTokenSymbol(chainId, "GHST");

    const [upperToken, setUpperToken] = useState(ftsoSymbol);
    const [bottomToken, setBottomToken] = useState(ghstSymbol);

    const setSettingsModalOpenInner = (value) => {
        setSettingsModalOpen(value);
    }

    useEffect(() => {
        switch (true) {
            case (upperToken === ftsoSymbol && bottomToken === stnkSymbol):
                setAction("STAKE")
                break;
            case (upperToken === ftsoSymbol && bottomToken === ghstSymbol):
                setAction("STAKE")
                break;
            case (upperToken === stnkSymbol && bottomToken === ftsoSymbol):
                setAction("UNSTAKE")
                break;
            case (upperToken === ghstSymbol && bottomToken === ftsoSymbol):
                setAction("UNSTAKE")
                break;
            case (upperToken === stnkSymbol && bottomToken === ghstSymbol):
                setAction("WRAP")
                break;
            case (upperToken === ghstSymbol && bottomToken === stnkSymbol):
                setAction("UNWRAP")
                break;
            default:
                setAction("STAKE")
        }
    }, [upperToken, bottomToken])

    return (
        <Modal
            headerContent={
                <Box display="flex" justifyContent="center" alignItems="center" gap="15px">
                    <Typography variant="h4">{action}</Typography>
                    <TokenStack tokens={[upperToken, bottomToken]} />
                </Box>
            }
            topLeft={
                <GhostStyledIcon
                    viewBox="0 0 23 23"
                    component={SettingsIcon}
                    style={{ cursor: "pointer" }}
                    onClick={() => setSettingsModalOpenInner(true)}
                />
            }
            open={isOpened}
            onClose={closeModal}
            maxWidth="460px"
            minHeight="200px"
        >
            <Box display="flex" alignItems="center" justifyContent="center" flexDirection="column">
                <StakeArea
                    settingsModalOpen={settingsModalOpen}
                    closeSettingModal={() => setSettingsModalOpenInner(false)}
                    upperToken={upperToken}
                    setUpperToken={setUpperToken}
                    bottomToken={bottomToken}
                    setBottomToken={setBottomToken}
                    action={action}
                    chainId={chainId}
                    address={address}
                    connect={connect}
                />
            </Box>
        </Modal>
    );
};

export default memo(Stake);