import { 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 { useAppSelector } from "redux/hooks";
import { colors } 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 { isRTL } = useAppSelector((state) => state.locale);

  const options: {
    label: string;
    value: string;
    price?: string;
    icon?: React.ReactNode;
    style?: React.CSSProperties;
  }[] = [
    {
      label: t("checkout.creditDebitCard"),
      value: "creditDebitCard",
      price: "Expires in: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")}>
      <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: "rgba(95, 108, 123, 1)",
                    }}
                  >
                    {option.label}
                  </ProText>
                  {!option.icon ? (
                    <ArabicPrice
                      price={option.price}
                      style={{
                        fontSize: "0.85rem",
                        color: "rgba(95, 108, 123, 1)",
                        fontWeight: 400,
                        ...option?.style,
                      }}
                    />
                  ) : (
                    <>{option.icon}</>
                  )}
                </div>
              </Radio>
              {/* {index !== options.length - 1 && (
              <Divider style={{ margin: 0 }} />
            )} */}
            </div>
          ))}
        </Space>
      </Group>
    </ProInputCard>
  );
};

export default PaymentMethods;
