interface

import { useCallback, useEffect, useState } from "react";
import { 
  Connection, 
  PublicKey,
 } from "@solana/web3.js";
import {
  Metaplex, 
  walletAdapterIdentity,
 } from "@metaplex-foundation/js";

import styled from "styled-components";
import "./globals.css";

import { Container, } from "@mui/material";
import Button from "@mui/material/Button";
import Paper from "@mui/material/Paper";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";

import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
import { SolanaMobileWalletAdapterWalletName } from "@solana-mobile/wallet-adapter-mobile";
import { useAnchorWallet, useWallet } from "@solana/wallet-adapter-react";
import { WalletDialogButton } from "@solana/wallet-adapter-material-ui";
import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui";
import { CandyMachineState, getCandyMachineState, payMint, allowMint, NFT, merkle } from "./candy-machine";

const ConnectButton = styled(WalletDialogButton)`
  width: 100%;
  height: 60px;
  margin-top: 10px;
  margin-bottom: 5px;
  background-color: #2e363c !important;
  border: 2px solid #ffd839;
  border-color: #ffd839 !important;
  color: #ffd839 !important;
  font-size: 1em !important;
  font-family: "Press+Start+2P" normal;
  font-weight: normal;
`;

export const MintButton = styled(Button)`
  width: 100%;
  height: 60px;
  margin-top: 10px;
  margin-bottom: 5px;
  background-color: #2e363c !important;
  border: 2px solid #ffd839;
  color: #ffff !important;
  font-size: 1em !important;
  font-family: "Press Start 2P" normal;
  font-weight: normal;
`;

export const AmountButton = styled(Button)`
  width: 15%;
  height: 30px;
  margin-top: 10px;
  margin-bottom: 5px;
  background-color: #2e363c !important;
  border: 2px solid #ffd839;
  color: #ffff !important;
  font-size: 1em !important;
  font-family: "Press Start 2P" normal;
  font-weight: normal;
`;

export interface HomeProps {
  candyMachineId: string;
  connection: Connection;
  txTimeout: number;
  rpcHost: string;
  network: WalletAdapterNetwork;
  error: string | undefined;
}

const Home = (props: HomeProps) => {
  const anchorWallet = useAnchorWallet();
  const { connect, connected, publicKey, wallet } = useWallet();
  const [candyMachine, setCandyMachine] = useState<CandyMachineState>();
  const [nft, setNft] = useState<NFT>();
  const [isUserMinting, setIsUserMinting] = useState(false);
  const [error, setError] = useState("");
  const [mintAmount, setMintAmount] = useState(1);
  
  const metaplex = new Metaplex(props.connection);

  const handleDecrement = () => {
    if (mintAmount <= 1) return;
    setMintAmount(mintAmount - 1);
  };

  const handleIncrement = () => {
    if (mintAmount >= 5) return;
    setMintAmount(mintAmount + 1);
  };

  const refreshCandyMachineState = useCallback(
    async () => {
      if (!publicKey) {
        return;
      }

      const candyMachine = await getCandyMachineState(metaplex, new PublicKey(props.candyMachineId));
      setCandyMachine(candyMachine);
    },
    [anchorWallet, props.candyMachineId, props.rpcHost]
  );

  const getPayMintButtonContent = () => {
    if (!candyMachine) {
      return "Loading...";
    }

    if (isUserMinting) {
      return "Minting in progress..";
    } else if (candyMachine.itemsRemaining === 0) {
      return "Sold out";
    } else {
      return "USDC";
    }
  };

  const payMintButtonClicked = async () => {
      setIsUserMinting(true);

    metaplex.use(walletAdapterIdentity(wallet!.adapter));
    const nft = await payMint(metaplex, candyMachine!);

    if (nft) {
      setNft(nft);
    } else {
      setError("Wait for it!!!");
    }
    
    setIsUserMinting(false);
    refreshCandyMachineState();
  }

  useEffect(() => {
    refreshCandyMachineState();
  }, [
    anchorWallet,
    props.candyMachineId,
    props.connection,
    refreshCandyMachineState,
  ]);

  useEffect(() => {
    (function loop() {
      setTimeout(() => {
        refreshCandyMachineState();
        loop();
      }, 20000);
    })();
  }, [refreshCandyMachineState]);

  const TitanDogImage = styled("img")`
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  margin-bottom: 30px;
  border-radius: 10%;
  border: 3px solid #ffd839;
  border-color: #ffd839 !important;
`

  return (
    <Container style={{ marginTop: -20 }}>
      <Container maxWidth="xs" style={{ position: 'relative' }}> 
        <TitanDogImage src="https://bafybeiazpv2pdgpvvihsgomigo4uaoasrhq4ixhrvqzovf524vggxv53va.ipfs.nftstorage.link/collection.gif" alt="SaibaKongJR" />
        <Paper
          style={{ padding: 24, background: '#3a434a', borderColor: '#ffd839', border: '3px solid #ffd839', borderRadius: 6 }}
        >
          {error || props.error ? (
            <Typography
            variant="h6"
            color="textPrimary"
            style={{
              fontWeight: "bold",
              textAlign: "center",
            }}
          >
            {error || props.error}
          </Typography>
          ) : undefined}
          {!connected ? (
            <ConnectButton
              onClick={(e) => {
                if (
                  wallet?.adapter.name === SolanaMobileWalletAdapterWalletName
                ) {
                  connect();
                  e.preventDefault();
                }
              }}
            >
              <Typography variant="body2" color="textSecondary" style={{
                      fontSize: "16px",
                      fontWeight: "bold",
                      color: "white",
                      textAlign: "center",
                    }}>
                Connect Wallet
              </Typography>
            </ConnectButton>
          ) : (
            <>
              <Grid
                container
                direction="row"
                justifyContent="center"
                wrap="nowrap"
              >
                <Grid item xs={3}>
                  <Typography variant="body2" color="#ffd839" style={{
                      textAlign: "center", fontFamily: "Press Start 2P"
                    }}>
                    Remaining
                  </Typography>
                  <Typography
                    variant="h6"
                    color="textPrimary"
                    style={{
                      fontWeight: "bold",
                      textAlign: "center",
                    }}
                  >
                    {`${candyMachine ? candyMachine.itemsRemaining : "Loading.."}`}
                  </Typography>
                </Grid>
                <Grid item xs={4}>
                    <Typography 
                      variant="body2" 
                      color="#ffd839"
                      style={{ fontFamily: "Press Start 2p" }}
                      >
                        Price USDC
                    </Typography>
                    <Typography
                      variant="h6"
                      color="textPrimary"
                      style={{ fontFamily: "Press Start 2P" }}
                    >
                      100
                    </Typography>
                  </Grid>
                  <Grid item xs={4}>
                  <Typography
                      variant="h6"
                      color="#ffd839"
                      style={{ fontFamily: "Press Start 2P" }}
                    >
                      INTERLINKED
                    </Typography>
                  </Grid>
              </Grid>
              <Grid
                container
                direction="row"
                justifyContent="center"
                wrap="nowrap"
              >
                <MintButton onClick={async () => await payMintButtonClicked()} disabled={isUserMinting || candyMachine?.itemsRemaining === 0}>
                  <Typography variant="body2" color="textSecondary" style={{
                      fontSize: "16px",
                      fontWeight: "bold",
                      color: "white",
                      textAlign: "center",
                    }}>
                    { getPayMintButtonContent() }
                  </Typography>
                </MintButton>
              </Grid>
              <Grid item xs={3}>
                  <Typography variant="body2" color="#ffd839" style={{
                      textAlign: "center", fontFamily: "Press Start 2P"
                    }}>
                    For future use... maybe.
                  </Typography>
                </Grid>
             
              <Grid
                container
                direction="row"
                justifyContent="center"
                wrap="nowrap"
              >
                
              </Grid>
            </>
          )}
          <Grid
                container
                direction="row"
                justifyContent="center"
                wrap="nowrap"
              >
              </Grid>
              <Grid item xs={3}>
                  <Typography variant="body2" color="#ffd839" style={{
                      textAlign: "center", fontFamily: "Press Start 2P"
                    }}>
                    Mint up to 5 per transaction using Crossmint.
                  </Typography>
                </Grid>
              <Grid
                container
                direction="row"
                justifyContent="center"
                wrap="nowrap"
              >
                <AmountButton onClick={handleDecrement}>
                  <Typography variant="body2" color="textSecondary" style={{
                      fontSize: "8px",
                      fontWeight: "bold",
                      color: "white",
                      textAlign: "center",
                    }}>
                    D
                  </Typography>
                </AmountButton>
                <input
                  readOnly
                  type="number"
                  value={mintAmount}
                />
                <AmountButton onClick={handleIncrement}>
                  <Typography variant="body2" color="textSecondary" style={{
                      fontSize: "8px",
                      fontWeight: "bold",
                      color: "white",
                      textAlign: "center",
                    }}>
                    U
                  </Typography>
                </AmountButton>
              </Grid>
          <CrossmintPayButton
          paymentMethod="fiat"
          clientId="812cca81-db82-40cd-be64-cd62daacf27b"
          mintConfig={{"type":"candy-machine",
                       "mintingGroup":"pay",
                       "quantity": mintAmount}}
          environment="production"
          className="my-custom-crossmint-button"
        />
        <CrossmintPayButton
          paymentMethod="ETH"
          clientId="812cca81-db82-40cd-be64-cd62daacf27b"
          mintConfig={{"type":"candy-machine",
                       "mintingGroup":"pay",
                       "quantity": mintAmount}}
          environment="production"
          className="my-custom-crossmint-button"
        />
        <CrossmintPayButton
          paymentMethod="SOL"
          clientId="812cca81-db82-40cd-be64-cd62daacf27b"
          mintConfig={{"type":"candy-machine",
                       "mintingGroup":"pay",
                       "quantity": mintAmount}}
          environment="production"
          className="my-custom-crossmint-button"
        />
        </Paper>
      </Container>
    </Container>
  );
};

export default Home;