import { Form, Radio, Space } from "antd";
import { Group } from "antd/es/radio";
import ArabicPrice from "components/ArabicPrice";
import DifferentCardIcon from "components/Icons/paymentMethods/DifferentCardIcon";
import ProText from "components/ProText";
import { useTranslation } from "react-i18next";
import { colors, ProGray1 } from "../../ThemeConstants";
import ProInputCard from "../ProInputCard/ProInputCard";
import styles from "./PaymentMethods.module.css";

interface PaymentMethodsProps {
  onPaymentSelect?: () => void;
}

const PaymentMethods = ({ onPaymentSelect, ...props }: PaymentMethodsProps) => {
  const { t } = useTranslation();

  const options: {
    label: string;
    value: string;
    price?: string;
    icon?: React.ReactNode;
    style?: React.CSSProperties;
  }[] = [
    {
      label: t("checkout.creditDebitCard"),
      value: "creditDebitCard",
      price: t("checkout.expiresIn") + ":12/26",
    },

    {
      label: t("checkout.differentCard"),
      value: "differentCard",
      icon: (
        <div className={styles.differentCardIcon}>
          {" "}
          <DifferentCardIcon />
        </div>
      ),
    },
    {
      label: t("checkout.fascanoWallet"),
      value: "fascanoWallet",
      price: "7.50",
      style: {
        color: colors.primary,
      },
    },
  ];

  return (
    <ProInputCard title={t("checkout.selectedPaymentMethod")}>
      <Form.Item name="paymentMethod" required rules={[{ required: true }]}>
        <Group
          className={styles.paymentMethods}
          style={{
            width: "100%",
          }}
          {...props}
          size="large"
        >
          <Space direction="vertical" style={{ width: "100%" }}>
            {options.map((option) => (
              <div key={option.value}>
                <Radio
                  key={option.value}
                  value={option.value}
                  onClick={onPaymentSelect}
                  style={{
                    height: 50,
                    borderRadius: 888,
                    border: "1px solid #DDD",
                    padding: 16,
                  }}
                >
                  <div
                    style={{
                      display: "flex",
                      flexDirection: "row",
                      justifyContent: "space-between",
                      width: "100%",
                      position: "relative",
                      top: -4,
                    }}
                  >
                    <ProText
                      style={{
                        fontSize: "0.85rem",
                        color: ProGray1,
                      }}
                    >
                      {option.label}
                    </ProText>
                    {!option.icon ? (
                      <ArabicPrice
                        price={option.price || 0}
                        style={{
                          fontSize: "0.75rem",
                          color: ProGray1,
                          fontWeight: 400,
                          ...option?.style,
                          position: "relative",
                          top: 4,
                        }}
                      />
                    ) : (
                      <>{option.icon}</>
                    )}
                  </div>
                </Radio>
              </div>
            ))}
          </Space>
        </Group>
      </Form.Item>
    </ProInputCard>
  );
};

export default PaymentMethods;