import React, { useCallback, useMemo } from 'react';

import { Box } from '@cleartrip/ct-design-box';
import { Container } from '@cleartrip/ct-design-container';
import { Divider } from '@cleartrip/ct-design-divider';
import { InputField, FieldAction, FieldChangeEvent } from '@cleartrip/ct-design-field';
import { Typography } from '@cleartrip/ct-design-typography';
import { AlertCallout } from '@cleartrip/ct-design-alert-callout';
import { ALPHA_NUMERIC } from '@cleartrip/ct-design-common-constants';
import { isEmpty } from '@cleartrip/ct-design-common-utils';

import { ICoupon } from '../type';
import { CALLOUT_TYPORAPHY_COLOR } from '../constants';
import { CouponList } from './CouponList';
import { couponSectionStaticStyles } from './style';

const CouponSection: React.FC<ICoupon> = ({
  couponField,
  couponList = [],
  infoCallout,
  knowMoreCTA,
  couponFilters,
}) => {
  const {
    text: infoCalloutText,
    prefixIcon: infoCalloutPrefixIcon,
    variant: infoCalloutVariant = CALLOUT_TYPORAPHY_COLOR.info,
  } = infoCallout || {};
  const { onChange, placeholder, value, disabled, errorMessage, onBlur, actions = [] } = couponField || {};
  const { label: knowMoreCTALabel, onClick: knowMoreCTAClick, suffixIcon: knowMoreCTASuffixIcon } = knowMoreCTA || {};

  const fieldPrompt = useMemo(() => {
    return {
      hasError: Boolean(errorMessage),
      message: errorMessage,
    };
  }, [errorMessage]);

  const getFieldActionList = useCallback(() => {
    return actions.map((actionItem) => {
      const { label, onClick, variant, isLoading = false, isDisabled = false } = actionItem || {};
      return {
        label,
        color: variant,
        isLoading,
        onClick,
        isDisabled,
      };
    });
  }, [actions]);

  const onCouponChange = (e: FieldChangeEvent) => {
    const upper = e.target.value.toUpperCase();
    if (!upper || (upper && ALPHA_NUMERIC.test(upper))) {
      e.target.value = upper;
      onChange?.(e);
    }
  };

  return (
    <Box boxSize='medium'>
      {!isEmpty(infoCallout) && (
        <AlertCallout
          textNode={<Typography variant='P3'>{infoCalloutText}</Typography>}
          variant={infoCalloutVariant as keyof typeof CALLOUT_TYPORAPHY_COLOR}
          prefixIconNode={infoCalloutPrefixIcon}
        />
      )}
      {!isEmpty(couponField) && (
        <InputField
          value={value}
          placeholder={placeholder}
          disabled={disabled}
          onChange={onCouponChange}
          onBlur={onBlur}
          prompt={fieldPrompt}
          suffix={<FieldAction actionsList={getFieldActionList()} />}
          id={placeholder}
        />
      )}
      <CouponList couponList={couponList} couponFilters={couponFilters} />
      {!isEmpty(knowMoreCTA) && (
        <Box boxSize='medium'>
          <Divider styleConfig={{ root: [couponSectionStaticStyles.divider] }} />
          <Container styleConfig={{ root: [couponSectionStaticStyles.knowMoreRow] }}>
            <Typography variant='L2' color='link' isClickable onClick={knowMoreCTAClick}>
              {knowMoreCTALabel}
            </Typography>
            &nbsp;
            {knowMoreCTASuffixIcon}
          </Container>
        </Box>
      )}
    </Box>
  );
};

export default CouponSection;