import React, { PureComponent } from "react";
import classnames from "classnames";

import iconAlipay from "../assets/kcxq_popovers_icon_alipay@2x.png";
import iconWechatpay from "../assets/kcxq_popovers_icon_wechatpay@2x.png";
import iconPaypal from "../assets/kcxq_popovers_icon_paypal@2x.png";
import mobileIconAlipay from "../assets/payment_btn_pay_alipay@2x.png";
import mobileIconWechatpay from "../assets/payment_btn_pay_wechatpay@2x.png";
import mobileIconPaypal from "../assets/payment_btn_pay_paypal@2x.png";

import styles from "./PayPlatformOptions.less";
import { exportStyleSizeClass } from "../Utils/utils";

type PAY_CHANNEL_VALUE =
  | "PAYPAL_PAYPAL"
  | "ALI_WEB"
  | "ALI_WAP"
  | "WX_WAP"
  | "WX_NATIVE";

type PAY_CHANNEL_CATEGORY_VALUE = "Alipay" | "Wechat" | "Paypal";

interface PAY_CHANNEL_TEXT { zh: string; en: string }
interface PAY_CHANNEL_IMAGE { desktop: any; mobile: any }
interface PAY_CHANNEL_TYPE {
  PAYPAL: PAY_CHANNEL_VALUE;
  ALI_WEB: PAY_CHANNEL_VALUE;
  ALI_WAP: PAY_CHANNEL_VALUE;
  WX_WAP: PAY_CHANNEL_VALUE;
  WX_NATIVE: PAY_CHANNEL_VALUE;
}

interface PAY_CHANNEL_CATEGORY {
  ALI: PAY_CHANNEL_CATEGORY_VALUE,
  WX: PAY_CHANNEL_CATEGORY_VALUE,
  PAYPAL: PAY_CHANNEL_CATEGORY_VALUE,
}

interface Props {
  payChannel: PAY_CHANNEL_VALUE;
  onPayChannelChange: (value: PAY_CHANNEL_VALUE) => void;
  isMobile: boolean;
  size: "small" | "normal" | "large";
  withTitle: boolean;
  titleText?: string;
  locale: "zh" | "en";
}

interface PayPlatformBlockProps {
  isMobile: boolean;
  isActive: boolean;
  size: "small" | "normal" | "large";
  onClick: any;
  image: PAY_CHANNEL_IMAGE;
  text: PAY_CHANNEL_TEXT;
  locale: "zh" | "en";
}

export const PAY_CHANNEL: PAY_CHANNEL_TYPE = {
  PAYPAL: "PAYPAL_PAYPAL", // PAYPAL_LIVE
  ALI_WEB: "ALI_WEB",
  ALI_WAP: "ALI_WAP",
  WX_WAP: "WX_WAP",
  WX_NATIVE: "WX_NATIVE"
};

export const PAY_CHANNEL_CATEGORY: PAY_CHANNEL_CATEGORY = {
  ALI: "Alipay",
  WX: "Wechat",
  PAYPAL: "Paypal",
}

const PAY_CHANNEL_INSTANCE: Array<{
  image: PAY_CHANNEL_IMAGE;
  text: PAY_CHANNEL_TEXT;
  key: PAY_CHANNEL_CATEGORY_VALUE;
}> = [
  {
    image: {
      desktop: iconAlipay,
      mobile: mobileIconAlipay,
    },
    text: {
      zh: "支付宝",
      en: "Alipay"
    },
    key: PAY_CHANNEL_CATEGORY.ALI,
  },
  {
    image: {
      desktop: iconWechatpay,
      mobile: mobileIconWechatpay,
    },
    text: {
      zh: "微信",
      en: "WeChat",
    },
    key: PAY_CHANNEL_CATEGORY.WX,
  },
  {
    image: {
      desktop: iconPaypal,
      mobile: mobileIconPaypal,
    },
    text: {
      zh: "PayPal",
      en: "PayPal",
    },
    key: PAY_CHANNEL_CATEGORY.PAYPAL,
  }
];

const PayPlatformBlock = ({
  isMobile = false,
  isActive = false,
  size = "normal",
  onClick,
  text,
  image,
  locale = "zh"
}: PayPlatformBlockProps) => {
  const showText = text[locale];
  if (isMobile) {
    return (
      <div className={styles.flexItem}>
        <div
          className={classnames(
            styles.payChannelBlock,
            {
              [styles.active]: isActive,
              ...exportStyleSizeClass(styles, size)
            },
            styles[locale]
          )}
          onClick={onClick}
        >
          <img src={image.mobile} alt={showText} className={styles.paymentImage} />
          <div className={styles.platformName}>{showText}</div>
        </div>
      </div>
    );
  }

  return (
    <div className={styles.flexItem}>
      <div
        className={classnames(
          styles.payChannelBlock,
          {
            [styles.active]: isActive,
            ...exportStyleSizeClass(styles, size)
          },
          styles[locale]
        )}
        onClick={onClick}
      >
        <span className={styles["payment-method-before"]} />
        <img src={image.desktop} alt={showText} className={styles.paymentImage} />
      </div>
    </div>
  );
};

const PayPlatformOptions = ({
  payChannel,
  onPayChannelChange,
  size = "normal",
  isMobile = false,
  withTitle = true,
  titleText,
  locale = "zh"
}: Props) => {
  let titleDOM = null;
  let payListDOM = [
    {
      valueKey: PAY_CHANNEL.ALI_WEB,
      categoryKey: PAY_CHANNEL_CATEGORY.ALI,
    },
    {
      valueKey: PAY_CHANNEL.WX_NATIVE,
      categoryKey: PAY_CHANNEL_CATEGORY.WX,
    },
    {
      valueKey: PAY_CHANNEL.PAYPAL,
      categoryKey: PAY_CHANNEL_CATEGORY.PAYPAL,
    },
  ].map(v => {
    const { valueKey, categoryKey } = v;
    const targetInstance = PAY_CHANNEL_INSTANCE.find(ins => ins.key === categoryKey);
    if (targetInstance) {
      const { text, image } = targetInstance;
      return (
        <PayPlatformBlock
          key={valueKey}
          {...{ isMobile, locale, size }}
          onClick={() => onPayChannelChange(valueKey)}
          isActive={valueKey === payChannel}
          text={text}
          image={image}
        />
      )
    }
  });
  if (withTitle) {
    titleDOM = (
      <div className={styles.label}>
        {titleText || locale === "zh" ? "支付方式" : "Payment"}
      </div>
    );
  }

  return (
    <div>
      {titleDOM}
      <div
        className={classnames(styles.payChannelBox, {
          [styles.mobile]: isMobile
        })}
      >
        <div className={styles.flexContainer}>
          {payListDOM}
        </div>
      </div>
    </div>
  );
};

export default PayPlatformOptions;
