import React, { FC, useState } from 'react';
import Dropdown, { DropdownOption } from '../../blocks/Dropdown';
import { getAmountWithCurrency } from '../../helpers/priceHelper';
import * as R from 'ramda';
import css from './index.module.css';
import LogoRawSVG from '../../assets/icons/logo_raw_no_border.svg';
import classNames from 'classnames';

interface FormGiftCardProps {
  onSelect: (amount) => void;
  isPrint: boolean;
  currencyCode: string;
  value: number | string;
  availableAmounts: Array<string>;
  translations: any;
}

const FormGiftCard: FC<FormGiftCardProps> = ({
  onSelect,
  isPrint,
  currencyCode,
  value,
  availableAmounts,
  translations,
}) => {
  const options: Array<DropdownOption> = availableAmounts.map(item => {
    return {
      value: item,
      name: getAmountWithCurrency(item, currencyCode),
    };
  });
  return (
    <div className={css.giftcard__container}>
      <div
        className={classNames(css.giftcard, {
          [css.black]: availableAmounts[0] == value,
          [css.blue]: availableAmounts[1] == value,
          [css.red]: availableAmounts[2] == value,
        })}
      >
        <LogoRawSVG className={css.giftcard__logo} />
        <div className={css.giftcard__amount}>
          <span>{currencyCode}</span>
          <span>{value}</span>
        </div>
        <div className={css.giftcard__home}>mila.com</div>
      </div>

      <div className={css.giftcard__dropdown}>
        <Dropdown
          options={[...options]}
          label={translations.selectAmount}
          name={'amountSelector'}
          value={value + ''}
          type={'filled'}
          onChange={e => {
            onSelect(e.target.value);
          }}
        />
        {!isPrint && (
          <span className={css.shipping}>{translations.shipping}</span>
        )}
      </div>
    </div>
  );
};

export default FormGiftCard;