import _isString from "lodash/fp/isString";
import _get from "lodash/fp/get";
import React from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import { NovaCompositionNavigationArrowDown as ArrowDown, NovaCompositionCoorpacademyFunnel as FunnelIcon, NovaSolidContentEditionPencil1 as PencilIcon, NovaCompositionCoorpacademyDraft as DraftIcon, NovaCompositionCoorpacademyValidate as ValidateIcon, NovaSolidVideosVideoSubtitle as VideoSubtitleIcon } from '@coorpacademy/nova-icons';
import Provider from '../../atom/provider';
import Checkbox from '../../atom/checkbox';
import Link from '../../atom/link';
import style from './style.css';
const THEMES = {
  COCKPIT: 'cockpit'
};
const createOptionsView = (_options, hasOptions) => {
  const optionsView = _options.map((option, oIndex) => {
    const {
      onChange,
      selected
    } = option;
    return /*#__PURE__*/React.createElement("div", {
      key: oIndex,
      className: selected ? style.selected : style.option
    }, /*#__PURE__*/React.createElement("button", {
      type: "button",
      onClick: onChange
    }, option.title));
  });
  return hasOptions ? /*#__PURE__*/React.createElement("div", {
    className: style.options
  }, optionsView) : null;
};
const buildTableContext = (translate, theme, headerTitle) => {
  if (theme === THEMES.COCKPIT) {
    return /*#__PURE__*/React.createElement("div", {
      className: style.header
    }, /*#__PURE__*/React.createElement("h1", {
      className: style.title
    }, headerTitle), /*#__PURE__*/React.createElement("div", {
      className: style.legend
    }, /*#__PURE__*/React.createElement("div", {
      className: style.icon
    }, /*#__PURE__*/React.createElement(DraftIcon, {
      width: 25,
      height: 25
    }), /*#__PURE__*/React.createElement("span", {
      className: style.label
    }, translate('Draft'))), /*#__PURE__*/React.createElement("div", {
      className: style.icon
    }, /*#__PURE__*/React.createElement(ValidateIcon, {
      width: 25,
      height: 25
    }), /*#__PURE__*/React.createElement("span", {
      className: style.label
    }, translate('Validated'))), /*#__PURE__*/React.createElement("div", {
      className: style.icon
    }, /*#__PURE__*/React.createElement("span", {
      className: style.nostatus
    }, '\u26A0️'), /*#__PURE__*/React.createElement("span", {
      className: style.label
    }, translate('No status')))));
  }
  if (headerTitle) {
    return /*#__PURE__*/React.createElement("div", {
      className: style.header
    }, /*#__PURE__*/React.createElement("h2", {
      className: style.title
    }, headerTitle));
  }
  return null;
};
const Table = (props, context) => {
  const {
    rows = [],
    columns = [],
    editable = true,
    theme,
    headerTitle = ''
  } = props;
  const {
    skin,
    translate
  } = context;
  const mediumColor = _get('common.medium', skin);
  const headerView = columns.map((column, cIndex) => {
    const {
      title,
      filtered,
      info = '',
      options = []
    } = column;
    const hasOptions = options.length > 0;
    const OptionsIcon = hasOptions && (filtered ? FunnelIcon : ArrowDown) || null;
    return /*#__PURE__*/React.createElement("th", {
      title: info,
      key: cIndex
    }, /*#__PURE__*/React.createElement("div", {
      className: hasOptions ? style.toggle : style.noOptions
    }, /*#__PURE__*/React.createElement(Checkbox, {
      id: title,
      name: title,
      checked: true,
      className: style.checkbox
    }), /*#__PURE__*/React.createElement("label", {
      htmlFor: title
    }, title), options.length > 0 ? createOptionsView(options, hasOptions) : null, /*#__PURE__*/React.createElement("div", {
      className: style.optionsIconWrapper
    }, hasOptions ? /*#__PURE__*/React.createElement(OptionsIcon, {
      style: {
        color: mediumColor
      },
      height: 16,
      width: 16,
      className: style.optionsIcon
    }) : null)));
  });
  const tableContext = buildTableContext(translate, theme, headerTitle);
  if (editable) {
    headerView.unshift(/*#__PURE__*/React.createElement("th", {
      key: "header"
    }, /*#__PURE__*/React.createElement("div", {
      className: style.noOptions
    })));
  }
  const renderIcon = field => {
    switch (_get('icon', field)) {
      case 'draft':
        return /*#__PURE__*/React.createElement(DraftIcon, {
          width: 25,
          height: 25
        });
      case 'validate':
        return /*#__PURE__*/React.createElement(ValidateIcon, {
          width: 25,
          height: 25
        });
      case 'nostatus':
        return /*#__PURE__*/React.createElement("span", {
          className: style.nostatus
        }, '\u26A0️');
      case 'videosubtitle':
        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VideoSubtitleIcon, {
          className: style.videosubtitle,
          width: 25,
          height: 25
        }), field.title);
      default:
        null;
    }
  };
  const bodyView = rows.map((row, index) => {
    const {
      fields = [],
      editHref
    } = row;
    const trClasses = classnames({
      [style.highlighted]: row.highlighted
    });
    const tableRows = fields.map((field, fIndex) => {
      if (!field) return /*#__PURE__*/React.createElement("td", {
        key: fIndex
      }, '');
      return /*#__PURE__*/React.createElement("td", {
        key: fIndex
      }, _isString(field) ? field : renderIcon(field));
    });
    if (editable) {
      tableRows.unshift(
      /*#__PURE__*/
      // TODO restore dropped support of hoverColor={brandColor}
      React.createElement("td", {
        key: "header"
      }, /*#__PURE__*/React.createElement(Link, {
        href: editHref
      }, /*#__PURE__*/React.createElement(PencilIcon, {
        style: {
          color: mediumColor
        },
        height: 16,
        width: 16
      }))));
    }
    return /*#__PURE__*/React.createElement("tr", {
      className: trClasses,
      key: index
    }, tableRows);
  });
  const mainClass = classnames(theme === THEMES.COCKPIT ? style.cockpit : style.wrapper);
  return /*#__PURE__*/React.createElement("div", {
    className: mainClass
  }, tableContext, /*#__PURE__*/React.createElement("table", {
    className: classnames(style.table, {
      [style.readonly]: !editable
    })
  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, headerView)), /*#__PURE__*/React.createElement("tbody", null, bodyView)));
};
Table.contextTypes = {
  skin: Provider.childContextTypes.skin,
  translate: Provider.childContextTypes.translate
};
Table.propTypes = process.env.NODE_ENV !== "production" ? {
  editable: PropTypes.bool,
  rows: PropTypes.arrayOf(PropTypes.shape({
    fields: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
      icon: PropTypes.string
    }), PropTypes.shape({
      icon: PropTypes.string,
      title: PropTypes.string
    })])),
    editHref: PropTypes.string,
    highlighted: PropTypes.bool
  })),
  columns: PropTypes.arrayOf(PropTypes.shape({
    title: PropTypes.string.isRequired,
    info: PropTypes.string,
    filtered: PropTypes.bool,
    options: PropTypes.arrayOf(PropTypes.shape({
      title: PropTypes.string.isRequired,
      onChange: PropTypes.func.isRequired,
      selected: PropTypes.bool.isRequired
    }))
  })),
  theme: PropTypes.oneOf([THEMES.COCKPIT]),
  headerTitle: PropTypes.string
} : {};
export default Table;
//# sourceMappingURL=index.js.map