import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Editor } from 'react-draft-wysiwyg';
import cx from 'classnames';
import { IconTextBoldMediumOutline, IconTextItalicMediumOutline } from '@teamleader/ui-icons';

import Box from '../box';
import IconButton from '../iconButton';
import ValidationText from '../validationText';

import theme from './theme.css';

const InlineStyling = ({
  config: {
    options,
    bold: { icon: boldIcon },
    italic: { icon: italicIcon },
  },
  currentState,
  onChange,
}) => {
  const iconsByOptionType = {
    bold: boldIcon,
    italic: italicIcon,
  };

  return (
    <Box display="flex" borderRightWidth={1}>
      {options.map((optionType) => (
        <IconButton
          icon={iconsByOptionType[optionType]}
          color="black"
          key={optionType}
          title={optionType}
          onClick={() => onChange(optionType)}
          selected={currentState[optionType]}
          marginRight={2}
        />
      ))}
    </Box>
  );
};

const toolbar = {
  options: ['inline'],
  inline: {
    options: ['bold', 'italic'],
    bold: { icon: <IconTextBoldMediumOutline /> },
    italic: { icon: <IconTextItalicMediumOutline /> },
    component: InlineStyling,
  },
};

const customStyleMap = {
  BOLD: {
    fontFamily: 'Inter-Bold',
  },
};

const WysiwygEditor = ({ className, error, onFocus, onBlur, success, warning, helpText, width, ...others }) => {
  const [isFocused, setIsFocused] = useState(false);

  const handleBlur = (event) => {
    setIsFocused(false);
    if (onBlur) {
      onBlur(event);
    }
  };

  const handleFocus = (event) => {
    setIsFocused(true);
    if (onFocus) {
      onFocus(event);
    }
  };

  const wrapperClassNames = cx(
    theme['wrapper'],
    {
      [theme['has-focus']]: isFocused,
      [theme['has-error']]: error,
      [theme['has-success']]: success,
      [theme['has-warning']]: warning,
    },
    className,
  );

  return (
    <Box style={{ width, flex: width && '0 0 auto' }}>
      <Editor
        toolbar={toolbar}
        wrapperClassName={wrapperClassNames}
        editorClassName={theme['input']}
        toolbarClassName={theme['toolbar']}
        onFocus={handleFocus}
        onBlur={handleBlur}
        customStyleMap={customStyleMap}
        {...others}
      />
      <ValidationText error={error} help={helpText} success={success} warning={warning} />
    </Box>
  );
};

WysiwygEditor.propTypes = {
  /** The text string/element to use as error message below the input. */
  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
  /** The text string to use as help text below the input. */
  helpText: PropTypes.string,
  /** The text string/element to use as a prefix inside the input field */
  success: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
  /** The text string/element to use as a suffix inside the input field */
  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
  /** A custom width for the editor field */
  width: PropTypes.string,
};

export default WysiwygEditor;

@@ -208,16 +208,69 @@
 mOutline
+, IconListNumeredMediumOutline, IconListMediumOutline
  %7D from 
@@ -733,16 +733,32 @@
 idth=%7B1%7D
+ marginRight=%7B2%7D
 %3E%0A      
@@ -1091,24 +1091,768 @@
 x%3E%0A  );%0A%7D;%0A%0A
+const ListStyling = (%7B%0A    config: %7B%0A      options,%0A      unordered: %7B icon: unorderedIcon %7D,%0A      ordered: %7B icon: orderedIcon %7D,%0A    %7D,%0A    currentState,%0A    onChange,%0A  %7D) =%3E %7B%0A    const iconsByOptionType = %7B%0A      unordered: unorderedIcon,%0A      ordered: orderedIcon,%0A    %7D;%0A  %0A    return (%0A      %3CBox display=%22flex%22 borderRightWidth=%7B1%7D marginRight=%7B2%7D%3E%0A        %7Boptions.map((optionType) =%3E (%0A          %3CIconButton%0A            icon=%7BiconsByOptionType%5BoptionType%5D%7D%0A            color=%22black%22%0A            key=%7BoptionType%7D%0A            title=%7BoptionType%7D%0A            onClick=%7B() =%3E onChange(optionType)%7D%0A            selected=%7BcurrentState.listType === optionType%7D%0A            marginRight=%7B2%7D%0A          /%3E%0A        ))%7D%0A      %3C/Box%3E%0A    );%0A  %7D;%0A%0A
 const toolba
@@ -1877,16 +1877,24 @@
 'inline'
+, 'list'
 %5D,%0A  inl
@@ -2070,24 +2070,215 @@
 yling,%0A  %7D,%0A
+  list: %7B%0A    component: ListStyling,%0A    options: %5B'unordered', 'ordered'%5D,%0A    unordered: %7B icon: %3CIconListMediumOutline /%3E %7D,%0A    ordered: %7B icon: %3CIconListNumeredMediumOutline /%3E %7D,%0A  %7D,%0A
 %7D;%0A%0Aconst cu

Add ListStyling component