import { priceUnits, trim } from "../../helpers";
import BondLogo from "../../components/BondLogo";
import { Paper, TableRow, TableCell, Slide, Link } from "@material-ui/core";
import { NavLink } from "react-router-dom";
import "./choosebond.scss";
import { Skeleton } from "@material-ui/lab";
import { IAllBondData } from "../../hooks/Bonds";

interface IBondProps {
  bond: IAllBondData;
}

export function BondDataCard({ bond }: IBondProps) {
  const isBondLoading = !bond.bondPrice ?? true;
  return (
    <>
      <Slide direction="up" in={true}>
        <Paper className="bond-data-card">
          <div className="bond-pair">
            <BondLogo bond={bond} />
            <div className="bond-name">
              <p className="bond-name-title">{bond.displayName}</p>
              {bond.isLP && (
                <div>
                  <Link href={bond.lpUrl} target="_blank">
                    <p className="bond-name-title">View Contract</p>
                  </Link>
                </div>
              )}
            </div>
          </div>

          <div className="data-row">
            <p className="bond-name-title">Price</p>
            <p className="bond-price bond-name-title">
              <>
                {isBondLoading ? (
                  <Skeleton width="50px" />
                ) : bond.available ? (
                  trim(bond.bondPrice, 2)
                ) : bond.purchased > 1000 ? (
                  "Sold Out"
                ) : (
                  "N/A"
                )}{" "}
              </>
            </p>
          </div>

          <div className="data-row">
            <p className="bond-name-title">ROI</p>
            <p className="bond-name-title">
              {isBondLoading ? (
                <Skeleton width="50px" />
              ) : bond.available ? (
                `${trim(bond.bondDiscount * 100, 2)}%`
              ) : (
                "-"
              )}
            </p>
          </div>

          <div className="data-row">
            <p className="bond-name-title">Purchased</p>
            <p className="bond-name-title">
              {isBondLoading ? (
                <Skeleton width="80px" />
              ) : (
                new Intl.NumberFormat("en-US", {
                  style: "currency",
                  currency: "USD",
                  maximumFractionDigits: 0,
                  minimumFractionDigits: 0,
                }).format(bond.purchased)
              )}
            </p>
          </div>
          <Link component={NavLink} to={`/mints/${bond.name}`}>
            <div className="bond-table-btn">
              <p>Mint {bond.displayName}</p>
            </div>
          </Link>
        </Paper>
      </Slide>
    </>
  );
}

export function BondTableData({ bond }: IBondProps) {
  const isBondLoading = !bond.bondPrice ?? true;

  return (
    <>
      <TableRow>
        <TableCell align="left">
          <BondLogo bond={bond} />
          <div className="bond-name">
            <p className="bond-name-title">{bond.displayName}</p>
            {bond.isLP && (
              <Link color="primary" href={bond.lpUrl} target="_blank">
                <p className="bond-name-title">View Contract</p>
              </Link>
            )}
          </div>
        </TableCell>
        <TableCell align="center">
          <p className="bond-name-title">
            <>
              {isBondLoading ? (
                <Skeleton width="50px" />
              ) : bond.available ? (
                <>
                  <span className="currency-icon">{priceUnits(bond)}</span> {trim(bond.bondPrice, 2)}
                </>
              ) : bond.purchased > 1000 ? (
                "Sold Out"
              ) : (
                "Coming Soon"
              )}{" "}
            </>
          </p>
        </TableCell>
        <TableCell align="right">
          <p className="bond-name-title">
            {isBondLoading ? <Skeleton width="50px" /> : bond.available ? `${trim(bond.bondDiscount * 100, 2)}%` : "-"}
          </p>
        </TableCell>
        <TableCell align="right">
          <p className="bond-name-title">
            {isBondLoading ? (
              <Skeleton width="50px" />
            ) : (
              new Intl.NumberFormat("en-US", {
                style: "currency",
                currency: "USD",
                maximumFractionDigits: 0,
                minimumFractionDigits: 0,
              }).format(bond.purchased)
            )}
          </p>
        </TableCell>
        {/* {bond.purchased > 1000 ? ( */}
        <TableCell>
          <Link component={NavLink} to={`/mints/${bond.name}`}>
            {bond.available ? (
              <div className="bond-table-btn">
                <p>Mint</p>
              </div>
            ) : (
              <div className="bond-table-btn">
                <p>Withdraw</p>
              </div>
            )}
          </Link>
        </TableCell>
        {/* // ) : undefined} */}
      </TableRow>
    </>
  );
}