import { IGenericSection } from '../../../generic/types/section';
import { IMessageEvent } from '../../types/index';

import { getMethods } from '../methods';

const richMessagesTypesCollection = new Map([
  ['button', 'ChatButton'],
  ['select', 'ChatMenu'],
  ['checkbox', 'ChatCheckboxGroup'],
  ['radio', 'ChatRadioGroup']
]);

const COMPONENT = {
  ELIGBLE_FOR_TRANSLATION: ['section', 'select', 'text', 'button', 'checkbox', 'radio'],
  ACTIONS: ['button', 'select', 'checkbox', 'radio']
};

const isAction = item => COMPONENT.ACTIONS.includes(item.type);
const isEligbleForTranslate = item => COMPONENT.ELIGBLE_FOR_TRANSLATION.includes(item.type);

function transformSection({ props, children }: IGenericSection) {
  const { button, rest } = children.reduce((component, item) => {
    const { button, rest } = component;
    if (!isEligbleForTranslate(item))
      return { button, rest };

    if (item.type === 'button') {
      button.props.options.push({ label: item?.props?.label});

      return { button, rest};
    }

    return { button, rest: [...rest, item]};
  }, {
    button: {
      type: 'button',
      props: {
        options: []
      }
    },
    rest: [],
  });

  if (button.props.options.length) {
    rest.push(button);
  }

  const result:Array<IMessageEvent> = rest
    .map(item => {
      const type = props?.salesforce?.type || item.type === 'text' ? 'ChatMessage' : 'RichMessage';

      if (item.type === 'section') 
        return getMethods(item.type)(item) as Array<IMessageEvent>;

      return {
        type,
        message: isAction(item) ? 
          { type: richMessagesTypesCollection.get(item.type), actions: getMethods(item.type)(item) } : 
          getMethods(item.type)(item) 
      };
    });

  return result.flat();
}

export {
  transformSection
};