import React from 'react';
import PropTypes from 'prop-types';
import { X, Plus } from 'react-feather';
import { filter, includes, map, pull, capitalize } from 'lodash';
import { FormattedMessage, intlShape } from 'react-intl';

import FlexContainer from 'primitives/container/flex-container';
import SectionHeader from 'primitives/text/section-header';
import Header, { HeaderType } from 'primitives/text/header';
import Dropdown from 'primitives/form/dropdown';
import Button from 'primitives/other/button';
import LinkIcon from 'primitives/other/link-icon';

import Entities from 'constants/entities';

const renderList = (list, listKey) => (
  <div key={listKey} className="EntityAttributes-Content">
    <b>
      <FormattedMessage id={listKey} />:
    </b>
    <ul className="EntityAttributes-ContentList">
      {list.map(capitalize).map(element => <li key={element}>{element}</li>)}
    </ul>
  </div>
);

export default function EntityTags({
  entityType,
  entity,
  isSidebarEditActive,
  updateEntityInEdit,
  isOpen,
  toggleOpen,
  intl,
}) {
  if (
    !Entities[entityType].tags ||
    (!isSidebarEditActive && !(entity.attributes.tags || []).length)
  ) {
    return null;
  }

  let tags;
  const entityTags = (entity.attributes || {}).tags || [];
  if (isSidebarEditActive) {
    tags = entityTags.sort().map(tag => (
      <FlexContainer key={tag} align="center" className="EntityTag--edit">
        <X
          className="EntityTag-Action"
          size={25}
          onClick={() =>
            updateEntityInEdit({
              attributes: { tags: pull(entityTags, tag) },
            })
          }
        />
        <Dropdown
          wrapperClassName="EntityTag-Dropdown"
          value={tag}
          dropUp
          clearable={false}
          onChange={({ value }) =>
            updateEntityInEdit({
              attributes: {
                tags: pull(entityTags, tag).concat([value]),
              },
            })
          }
          options={filter(
            Entities[entityType].tags,
            ({ key }) => !includes(entity.attributes.tags, key) || key === tag,
          ).map(({ key, name }) => ({
            value: key,
            label: name,
          }))}
        />
      </FlexContainer>
    ));
  } else {
    tags = entityTags
      .map(tag => Entities[entityType].tags[tag])
      .map(({ key, name, description, ...lists }) => (
        <div key={key} className="EntityAttributes-Tag">
          <Header type={HeaderType.header4}>{name}</Header>
          <p className="EntityAttributes-Content">{description}</p>
          {map(lists, renderList)}
        </div>
      ));
  }

  let header = (
    <SectionHeader isOpen={isOpen} onClick={toggleOpen}>
      <span className="EntityTags-Name">
        <FormattedMessage
          id="misc.entityTags"
          values={{
            entity: intl.formatMessage({ id: Entities[entityType].name }),
          }}
        />
      </span>
    </SectionHeader>
  );
  if (isSidebarEditActive) {
    header = (
      <SectionHeader isOpen={isOpen} onIconClick={toggleOpen}>
        <FlexContainer justify="spaceBetween" align="flexEnd">
          <span className="EntityTags-Name" onClick={toggleOpen}>
            <FormattedMessage
              id="misc.entityTags"
              values={{
                entity: intl.formatMessage({ id: Entities[entityType].name }),
              }}
            />
          </span>
          <Button
            minimal
            className="EntityTags-AddButton"
            onClick={() => {
              const attributeTags = (entity.attributes || {}).tags || [];
              if (includes(attributeTags, '')) {
                return;
              }
              updateEntityInEdit({
                attributes: {
                  tags: attributeTags.concat(['']),
                },
              });
            }}
          >
            <LinkIcon size={15} icon={Plus} />
            <FormattedMessage
              id="misc.addEntityTag"
              values={{
                entity: intl.formatMessage({ id: Entities[entityType].name }),
              }}
            />
          </Button>
        </FlexContainer>
      </SectionHeader>
    );
  }

  let tagsSection = null;
  if (isOpen) {
    tagsSection = <div className="EntityAttributes-Section">{tags}</div>;
  }

  return (
    <div>
      {header}
      {tagsSection}
    </div>
  );
}

EntityTags.propTypes = {
  isSidebarEditActive: PropTypes.bool.isRequired,
  entity: PropTypes.shape({
    attributes: PropTypes.shape(),
  }).isRequired,
  entityType: PropTypes.string.isRequired,
  updateEntityInEdit: PropTypes.func.isRequired,
  isOpen: PropTypes.bool.isRequired,
  toggleOpen: PropTypes.func.isRequired,
  intl: intlShape.isRequired,
};

@@ -137,20 +137,8 @@
 pull
-, capitalize
  %7D f
@@ -611,16 +611,22 @@
  = (list
+Length
 , listKe
@@ -626,16 +626,21 @@
  listKey
+, key
 ) =%3E (%0A 
@@ -733,24 +733,32 @@
 age id=%7B
+%60misc.$%7B
 listKey%7D
  /%3E:%0A   
@@ -749,16 +749,18 @@
 listKey%7D
+%60%7D
  /%3E:%0A   
@@ -826,76 +826,185 @@
    %7B
-list.map(capitalize).map(element =%3E %3Cli key=%7Belement%7D%3E%7Belement%7D%3C/li%3E
+%5B...Array(listLength).keys()%5D.map(index =%3E (%0A        %3Cli key=%7B%60$%7BlistKey%7D-$%7Bindex%7D%60%7D%3E%0A          %3CFormattedMessage id=%7B%60tags.$%7Bkey%7D.$%7BlistKey%7D.$%7Bindex%7D%60%7D /%3E%0A        %3C/li%3E%0A      )
 )%7D%0A 
@@ -2615,124 +2615,318 @@
 r4%7D%3E
-%7Bname%7D%3C/Header%3E%0A          %3Cp className=%22EntityAttributes-Content%22%3E%7Bdescription%7D%3C/p%3E%0A          %7Bmap(lists, renderList
+%0A            %3CFormattedMessage id=%7B%60tags.$%7Bkey%7D%60%7D /%3E%0A          %3C/Header%3E%0A          %3Cp className=%22EntityAttributes-Content%22%3E%0A            %3CFormattedMessage id=%7B%60tags.$%7Bkey%7D.description%60%7D /%3E%0A          %3C/p%3E%0A          %7Bmap(lists, (listLength, listKey) =%3E%0A            renderList(listLength, listKey, key),%0A          
 )%7D%0A 

Use translated tag keys in sidebar