import React from 'react'
import Button from 'react-bootstrap/Button'
import SVG from 'react-inlinesvg'

import DoneSvg from '../../assets/images/done.svg'
import XmarkSvg from '../../assets/images/xmark.svg'

export interface IPromoCodeSectionProps {
  code: string;
  codeIsApplied: boolean;
  showPromoInput: boolean;
  setCode: (value: string) => void;
  setShowPromoInput: (value: boolean) => void;
  updateTickets: (value: boolean, type: string) => void;
  setCodeIsApplied: (value: boolean) => void;
  codeIsInvalid: boolean;
  setCodeIsInvalid: (value: boolean) => void;
  promoText?: string;
  showAlertIcons?: boolean;
}

export const PromoCodeSection = ({
  code,
  codeIsApplied,
  showPromoInput,
  setCode,
  setShowPromoInput,
  updateTickets,
  setCodeIsApplied,
  codeIsInvalid,
  setCodeIsInvalid,
  promoText,
  showAlertIcons
}: IPromoCodeSectionProps) => {
  const isPromoCodeHasValue = !!code.trim()
  const appliedPromoCode = window?.localStorage?.getItem('appliedPromoCode')

  const renderInputField = () => (
    <div className="promo-code-block">
      <div className="promo-code-block">
        <p className="promo-code-text">Promo code</p>
      </div>
      <input
        className="promo-code-input"
        placeholder=""
        onChange={e => {
          setCode(e.target.value)
        }}
        onKeyPress={event => {
          if (event.key === 'Enter' && isPromoCodeHasValue) {
            setShowPromoInput(false)
            updateTickets(true, 'promo')
          }
        }}
      />
      <Button
        className="promo-submit-button"
        onClick={() => {
          if (isPromoCodeHasValue) {
            setShowPromoInput(false)
            updateTickets(true, 'promo')
          }
        }}
      >
        APPLY
      </Button>
    </div>
  )

  return (
    <div>
      {codeIsApplied ? (
        <div className="alert-info">
          {showAlertIcons && (
            <SVG
              src={DoneSvg}
              preProcessor={code =>
                code.replace(/fill=".*?"/g, 'fill="currentColor"')
              }
            />
          )}
          <p className="promo-code-success">PROMO CODE APPLIED SUCCESSFULLY</p>
        </div>
      ) : null}
      {codeIsApplied ? (
        <div className="alert-info">
          <p className="promo-code-success">PROMO CODE: {appliedPromoCode}</p>
        </div>
      ) : null}
      {codeIsInvalid ? (
        <div className="alert-info fail">
          {showAlertIcons && (
            <SVG
              src={XmarkSvg}
            />
          )}
          <p className="promo-code-fail">Invalid Promo Code</p>
        </div>
      ) : null}
      {!showPromoInput && (
        <Button
          className="promo-code-button"
          placeholder="Promo Codes"
          onClick={() => {
            setCodeIsApplied(false)
            setShowPromoInput(true)
            setCodeIsInvalid(false)
          }}
        >
          {promoText ?? 'Got a promo code? Click here'}
        </Button>
      )}
      {showPromoInput && renderInputField()}
    </div>
  )
}