import { Form, Row, Col, Select, Avatar, Spin } from "antd";
import React, { useState, Dispatch, SetStateAction, useEffect } from "react";
import { Link } from "react-router-dom";
import AddButton from "../../components/Button/AddButton";
import CustomInput from "../../components/Input/CustomInput";
import CustomSelect from "../../components/Input/CustomSelect";
import CurrencyImage from "../../components/Currency/CurrencyImage";
import {
  IPropsSupportedCurrency,
  PaymentLinkResponseType,
} from "../../components/types";
import { useGetCurrencyQuery } from "../../services/checkout-service";
import { skipToken } from "@reduxjs/toolkit/dist/query";

export type ICheckoutProps = {
  loading: boolean;
  data: PaymentLinkResponseType;
  setShowWalletOption: Dispatch<SetStateAction<boolean>>;
  setTransactionValue: Dispatch<SetStateAction<any>>;
};
const ProductCheckout = ({
  data,
  loading,
  setShowWalletOption,
  setTransactionValue,
}: ICheckoutProps) => {
  const [form] = Form.useForm();
  const [currencyType, setCurrencyType] = useState<string>("");
  const { data: supportedCurrency, isLoading } = useGetCurrencyQuery(
    data.businessId ?? skipToken
  );

  const selectedCurrency = (value: string) => {
    setCurrencyType(value);
  };

  async function onConfirm(values: any) {
    setShowWalletOption(true);
    delete values.amount;
    setTransactionValue(values);
  }

  return (
    <div className="px-4 pb-20">
      {Boolean(data.isActive) ? (
        <div className="shadow-xl max-w-lg xl:max-w-xl m-auto bg-white p-10 md:p-20 mt-20 rounded-md">
          <Form
            form={form}
            className="w-full"
            layout="vertical"
            onFinish={onConfirm}
          >
            <Row gutter={24} className="check">
              {data?.imageFilePath && (
                <Col xs={24} md={8}>
                  <div>
                    <Avatar
                      shape={"circle"}
                      size={100}
                      alt={"product-image"}
                      src={`${process.env.REACT_APP_IMAGE_STORAGE}/${data?.imageFilePath}`}
                    />
                  </div>
                </Col>
              )}
              <Col xs={24} md={16}>
                <div className="text-[#02084B] mt-2">
                  <h3 className="capitalize font-bold text-[#02084B] text-lg">
                    {data.name}
                  </h3>
                  <p>{data.description}</p>
                </div>
              </Col>
            </Row>
   
            {data.environment === "TEST" && (
          <p className="text-[#EB5757] text-center font-medium">
         This business is currently running in test mode, do not send real tokens to the generated wallet address.
          </p>
        )}
   
            <hr className="my-5 text-[#02084B] bg-[#02084B] opacity-30 2xl:opacity-100" />
            <Row gutter={24}>
              <Col xs={24} md={12}>
                <Form.Item
                  className="ivry-label"
                  label="First name"
                  name="firstName"
                  rules={[
                    {
                      required: true,
                      message: "Name is required",
                    },
                  ]}
                >
                  <CustomInput placeholder="Enter Firstname" />
                </Form.Item>
              </Col>

              <Col xs={24} md={12}>
                <Form.Item
                  className="ivry-label"
                  label="Last name"
                  name="lastName"
                  rules={[
                    {
                      required: true,
                      message: "Name is required",
                    },
                  ]}
                >
                  <CustomInput type="text" placeholder="Enter Lastname" />
                </Form.Item>
              </Col>
            </Row>

            <Form.Item
              className="ivry-label"
              label="Email Address"
              name="email"
              rules={[
                {
                  type: "email",
                  required: true,
                  message: "Email is required",
                },
              ]}
            >
              <CustomInput type="email" placeholder="Enter Email" />
            </Form.Item>
            <Spin spinning={isLoading}>
              <Form.Item
                className="ivry-label"
                label="Select coin"
                name="cryptocurrency"
              >
                <CustomSelect
                  prefixIcon={
                    currencyType !== "" && <CurrencyImage type={currencyType} />
                  }
                  className={currencyType !== "" ? "asPrefix" : ""}
                  onChange={selectedCurrency}
                  placeholder="Select Coin"
                >
                  <>
                    {supportedCurrency?.map(
                      (currency: IPropsSupportedCurrency, i) => (
                        <Select.Option key={i} value={currency.currency}>
                          {currency.currency}
                        </Select.Option>
                      )
                    )}
                  </>
                </CustomSelect>
              </Form.Item>
            </Spin>
            <Form.Item initialValue={data.amount} label="Amount" name="amount">
              <CustomInput
                type="text"
                className="pre"
                disabled
                prefix={`${data.baseFiat}`}
              />
            </Form.Item>
            <div className="flex w-full justify-end mt-8">
              <AddButton className="w-40" type="submit" loading={loading}>
                Make Payment
              </AddButton>
            </div>
          </Form>
          <div className="mt-8 flex gap-2 justify-center items-center">
            <span>
              <svg
                width="12"
                height="14"
                viewBox="0 0 12 14"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M11 6H10V4C10 2.93913 9.57857 1.92172 8.82843 1.17157C8.07828 0.421427 7.06087 0 6 0C4.93913 0 3.92172 0.421427 3.17157 1.17157C2.42143 1.92172 2 2.93913 2 4V6H1L0 7V13L1 14H11L12 13V7L11 6ZM3 4C3 3.20435 3.31607 2.44129 3.87868 1.87868C4.44129 1.31607 5.20435 1 6 1C6.79565 1 7.55871 1.31607 8.12132 1.87868C8.68393 2.44129 9 3.20435 9 4V6H3V4ZM11 13H1V7H11V13Z"
                  fill="#02084B"
                />
              </svg>
            </span>{" "}
            <div>
              <span className="text-[#02084B] text-[14px]">
                Powered by <span className="text-[#CC9933]">Ivory</span>pay
              </span>
            </div>
          </div>
          <hr className="my-5 text-[#02084B] bg-[#02084B]" />

          <div className="text-center text-sm">
            <p>For questions and enquiries, please contact:</p>
            <Link
                className="text-[#394190] font-semibold"
                to="mailto:support@ivorypay.io"
              >
                support@ivorypay.io
              </Link>
          </div>
        </div>
      ) : (
        <div className="text-center error -mb-20">
          <h3 className="text-[#02084B] font-bold text-2xl">
            {" "}
            Payment Link is Inactive{" "}
          </h3>
        </div>
      )}
    </div>
  );
};
export default ProductCheckout;