import React, { useEffect, useState } from "react";
import PropTypes from 'prop-types';
import { injectIntl, FormattedMessage } from "react-intl";
import {
  CapHeading,
  CapRadioCard,
  CapLabel,
  CapButton,
  CapSpin,
} from '@capillarytech/cap-ui-library';
import messages from './messages';
import styles from './MarketingObjective.style';
import withStyles from '../../hoc/withStyles';

const renderMarketingObjectiveList = ({
  onMarketingObjectiveChange,
  marketingObjectiveSelectedOption,
  defaultmarketingObjective,
  marketingObjectiveList = [],
}) => {
  const marketingList = (marketingObjective) => {
    const { label, panes = [] } = marketingObjective;
    const selectedPaneExists = panes.some((item) => item.value === marketingObjectiveSelectedOption);
    const modifiedPanes = !selectedPaneExists
      ? [...panes, {
        value: marketingObjectiveSelectedOption,
      }]
      : panes;
    return (
      <div key={label} className={selectedPaneExists ? 'selected-radio-group' : 'non-selected-radio-group'}>
        <CapHeading type="h4" className="radio-group-heading">{label}</CapHeading>
        <CapRadioCard
          onChange={({ target: { value } }) => onMarketingObjectiveChange(value)}
          panes={modifiedPanes}
          cardWidth="324px"
          cardHeight="auto"
          selected={marketingObjectiveSelectedOption}
          defaultValue={defaultmarketingObjective}
        />
      </div>
    );
  };

  return (
    <div className="is-scrollable-section">
      {marketingObjectiveList.map(marketingList)}
    </div>
  );
};

export const MarketingObjective = ({
  onMarketingObjectiveSelect,
  selectedMarketingObjective,
  defaultmarketingObjective,
  onSubmit,
  className,
  marketingObjectiveList,
}) => {
  const [marketingObjectiveSelectedOption, onMarketingObjectiveChange] = useState(selectedMarketingObjective || defaultmarketingObjective);

  useEffect(() => {
    [...document.querySelectorAll('.non-selected-radio-group .ant-radio-group')].forEach((node) => {
      const paneToSelect = node.lastChild;
      paneToSelect.click();
    });
  }, [marketingObjectiveSelectedOption]);

  const onSubmitAction = () => {
    onMarketingObjectiveSelect(marketingObjectiveSelectedOption);
    onSubmit(false);
  };

  return (
    <div className={className}>
      <>
        <CapHeading type="h3">
          <FormattedMessage {...messages.fbMarketingObjectiveTitle} />
        </CapHeading>
        <CapLabel type="label1">
          <FormattedMessage {...messages.fbMarketingObjectiveDescription} />
        </CapLabel>
      </>
      <CapSpin spinning={!marketingObjectiveList.length}>
        {renderMarketingObjectiveList({
          onMarketingObjectiveChange,
          marketingObjectiveSelectedOption,
          defaultmarketingObjective,
          marketingObjectiveList,
        })}
      </CapSpin>
      <CapButton
        type="primary"
        className="submit-button-section"
        onClick={() => onSubmitAction()}
      >
        <FormattedMessage {...messages.fbMarketingObjectiveDone} />
      </CapButton>
    </div>
  );
};

MarketingObjective.propTypes = {
  onMarketingObjectiveSelect: PropTypes.func,
  selectedMarketingObjective: PropTypes.string,
  defaultmarketingObjective: PropTypes.string,
  onSubmit: PropTypes.func,
  className: PropTypes.string,
  marketingObjectiveList: PropTypes.arrayOf(PropTypes.object),
};

export default injectIntl(withStyles(MarketingObjective, styles));
