import _map from "lodash/fp/map";
import _keys from "lodash/fp/keys";
import _isEmpty from "lodash/fp/isEmpty";
import _includes from "lodash/fp/includes";
import React from 'react';
import BrandFormGroup from '../../molecule/brand-form-group';
import ListItems from '../list-items';
import Title from '../../atom/title';
import TitleAndInput from '../title-and-input';
import { COLORS } from '../../variables/colors';
import propTypes from './types';
import style from './style.css';
const buildFormField = (field, type) => {
  return {
    ...field,
    type,
    theme: 'coorpmanager',
    size: 'large'
  };
};
const buildTitleAndInputField = ({
  title,
  subtitle,
  required = false,
  dataName,
  childType
}) => {
  return {
    title: {
      type: 'form-group',
      title,
      subtitle,
      titleSize: 'small-and-light',
      subtitleSize: subtitle ? 'standard-without-margin' : undefined,
      required,
      'data-name': dataName
    },
    childType,
    type: 'titleAndInput'
  };
};
const SkillInformations = skillInformations => {
  const {
    form,
    iconEditor
  } = skillInformations;
  const {
    select,
    inputTextArea,
    inputText
  } = form;
  const iconEditorProps = {
    title: {
      type: 'form-group',
      title: iconEditor.title,
      titleSize: 'small-and-light',
      required: true
    },
    field: {
      iconPreview: iconEditor.iconPreview,
      inputText: iconEditor.inputText,
      buttonLink: iconEditor.buttonLink ? {
        type: 'secondary',
        label: iconEditor.buttonLink.label,
        ariaLabel: iconEditor.buttonLink.ariaLabel,
        dataName: 'open-icon-modal-button',
        icon: {
          position: 'left',
          faIcon: {
            name: 'arrows-rotate',
            size: 16
          }
        },
        onClick: iconEditor.buttonLink.onClick,
        customStyle: {
          borderRadius: '12px',
          padding: '0 8px 0 16px',
          fontWeight: '500'
        }
      } : undefined,
      size: 'large'
    },
    childType: 'iconEditor'
  };
  const fields = [{
    ...buildTitleAndInputField({
      title: select.title,
      subtitle: select.subtitle,
      required: true,
      dataName: select['data-name'],
      childType: 'select'
    }),
    field: {
      options: select.field.options,
      'aria-label': select.field['aria-label'],
      onChange: select.field.onChange,
      theme: 'skillDetail',
      size: 'large'
    }
  }, {
    ...buildTitleAndInputField({
      title: inputText.title,
      required: true,
      childType: 'inputText'
    }),
    field: buildFormField(inputText.field, 'text')
  }, {
    ...buildTitleAndInputField({
      title: inputTextArea.title,
      childType: 'inputTextArea'
    }),
    field: buildFormField(inputTextArea.field, 'textarea')
  }];
  const formProps = {
    title: form.title,
    subtitle: form.subtitle,
    titleSize: 'xl-strong',
    subtitleSize: 'medium',
    fields
  };
  return /*#__PURE__*/React.createElement("div", {
    className: style.skillInformationsContainer
  }, /*#__PURE__*/React.createElement(BrandFormGroup, formProps), /*#__PURE__*/React.createElement("div", {
    className: style.iconEditor
  }, /*#__PURE__*/React.createElement(TitleAndInput, iconEditorProps)));
};

// @ts-expect-error convert is not recognized by the types
const uncappedMap = _map.convert({
  cap: false
});
const buildButtonProps = button => ({
  ...button,
  type: 'primary',
  'aria-label': button.label,
  'data-name': `button-${button.label}`,
  hoverBackgroundColor: COLORS.primary_100,
  hoverColor: COLORS.cm_primary_blue,
  icon: {
    position: 'left',
    faIcon: {
      name: 'plus',
      color: COLORS.cm_primary_blue,
      size: 14,
      customStyle: {
        padding: 0
      }
    }
  },
  customStyle: {
    width: 'fit-content',
    backgroundColor: COLORS.cm_blue_50,
    color: COLORS.cm_primary_blue,
    borderRadius: '12px',
    paddingRight: '8px',
    paddingleft: '16px',
    fontWeight: 600
  }
});
const buildTranslationItems = ({
  title: itemTitle,
  onEditClick,
  onDeleteClick
}, index) => ({
  id: index,
  title: itemTitle,
  buttonLink: {
    'aria-label': 'Edit',
    type: 'primary',
    customStyle: {
      width: 'fit-content',
      backgroundColor: 'transparent'
    },
    hoverBackgroundColor: COLORS.cm_grey_100,
    icon: {
      position: 'left',
      faIcon: {
        name: 'edit',
        color: COLORS.cm_grey_500,
        size: 16
      }
    },
    onClick: onEditClick
  },
  secondButtonLink: {
    'aria-label': 'Delete',
    type: 'primary',
    customStyle: {
      width: 'fit-content',
      backgroundColor: 'transparent'
    },
    hoverBackgroundColor: COLORS.cm_grey_100,
    icon: {
      position: 'left',
      faIcon: {
        name: 'trash',
        color: COLORS.cm_grey_500,
        size: 16
      }
    },
    onClick: onDeleteClick
  }
});
const Translations = ({
  title,
  subtitle,
  items,
  button,
  localesOptions,
  emptyResult
}) => {
  const buttonProps = buildButtonProps(button);
  const translationMenuAction = {
    button: buttonProps,
    menu: {
      buttons: _map(({
        label: optionLabel,
        ref: optionRef,
        onClick: optionOnClick
      }) => ({
        type: 'defaultLeft',
        onClick: optionOnClick,
        customStyle: {
          width: '238px'
        },
        label: optionLabel,
        'data-name': optionLabel,
        // disable if current locale option is already in items list
        disabled: _includes(optionRef, _keys(items))
      }), localesOptions)
    },
    menuWrapper: {
      customStyle: {
        maxHeight: '252px'
      }
    }
  };
  const translationProps = {
    title: {
      title,
      type: 'form-group',
      subtitle,
      titleSize: 'xl-strong',
      subtitleSize: 'medium'
    },
    'aria-label': title,
    content: {
      ...(!_isEmpty(emptyResult) && {
        emptyResult: {
          ...emptyResult,
          button: translationMenuAction
        }
      }),
      items: uncappedMap(buildTranslationItems, items),
      type: 'list'
    },
    buttonMenuAction: translationMenuAction
  };
  return /*#__PURE__*/React.createElement(ListItems, translationProps);
};
const buildContentItem = ({
  ref,
  title,
  subtitle,
  image,
  tags: {
    label,
    iconName
  },
  checkbox,
  deleteButton
}) => ({
  id: ref,
  title,
  subtitle,
  image,
  tags: [{
    label,
    type: 'default',
    icon: {
      iconName,
      preset: 's',
      customStyle: {
        padding: 0
      },
      position: 'left'
    }
  }],
  checkbox,
  secondButtonLink: {
    ...deleteButton,
    'data-name': `button-${deleteButton?.label}`,
    'aria-label': 'Delete',
    type: 'primary',
    customStyle: {
      width: 'fit-content',
      backgroundColor: 'transparent'
    },
    hoverBackgroundColor: COLORS.cm_grey_100,
    icon: {
      position: 'left',
      faIcon: {
        name: 'trash',
        color: COLORS.neutral_500,
        size: 16
      }
    }
  }
});
const Content = ({
  title,
  subtitle,
  button,
  list: {
    title: listTitle,
    checkbox,
    items,
    search,
    emptyResult
  },
  actionButtons,
  checkboxWithTitle: checkboxWithTitleProps
}) => {
  const buttonProps = buildButtonProps(button);
  const titleProps = {
    type: 'form-group',
    title,
    subtitle,
    button: buttonProps,
    required: true
  };
  const listProps = {
    ...(!_isEmpty(checkbox) && {
      ...checkbox,
      icon: {
        iconName: 'minus',
        iconColor: COLORS.white,
        preset: 's'
      },
      customStyle: {
        fontWeight: 600,
        color: COLORS.cm_grey_500,
        fontSize: '16px'
      }
    }),
    title: listTitle,
    'aria-label': 'content list items',
    content: {
      ...(!_isEmpty(emptyResult) && {
        emptyResult: {
          ...emptyResult,
          button: buttonProps
        }
      }),
      items: _map(buildContentItem, items),
      type: 'list'
    },
    search: {
      ...search,
      theme: 'coorpmanager'
    },
    actionButtons: _map(actionButton => ({
      ...actionButton,
      customStyle: {
        fontWeight: '600',
        borderRadius: '12px',
        width: 'auto'
      }
    }), actionButtons),
    checkboxWithTitle: {
      ...checkboxWithTitleProps,
      name: checkboxWithTitleProps?.title,
      'aria-label': checkboxWithTitleProps?.title,
      'data-name': checkboxWithTitleProps?.title,
      customStyle: {
        fontWeight: 600,
        color: COLORS.neutral_500,
        fontSize: '16px'
      },
      icon: {
        iconName: 'minus',
        iconColor: 'white',
        preset: 's'
      }
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    className: style.contentContainer
  }, /*#__PURE__*/React.createElement(Title, titleProps), /*#__PURE__*/React.createElement(ListItems, listProps));
};
const SkillEdition = props => {
  const {
    skillInformations,
    translations,
    content
  } = props;
  return /*#__PURE__*/React.createElement("div", {
    className: style.container
  }, /*#__PURE__*/React.createElement(SkillInformations, skillInformations), /*#__PURE__*/React.createElement(Translations, translations), /*#__PURE__*/React.createElement(Content, content));
};
SkillEdition.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
export default SkillEdition;
//# sourceMappingURL=index.js.map