// 3rd-party libs
import React from 'react';
import PropTypes from 'prop-types';

// Components
import { Avatar, Box, Button, ColorPicker, Dropdown, EmojiPicker, Flex, Input, Textarea } from '@ui/components';
import TutorialReferencePicker from '../TutorialReferencePicker';

// PropTypes
import { TutorialProp } from '@ui/compositions/Tutorials/Modal/proptypes/tutorials';
import { ApiEndpointProp } from '@ui/compositions/Tutorials/Modal/proptypes/apiEndpoints';

// Style
let classes = {};
/* istanbul ignore next */
if (typeof window !== 'undefined' || typeof _COMPILED_ === 'undefined') classes = require('./style.module.scss');

const TutorialReview = ({ debounceInputChange, updateTutorial, tutorial, endpoints }) => {
  const setReferenceSelection = id => {
    const { referenceDisplay } = tutorial;

    const index = referenceDisplay.findIndex(ref => ref.toString() === id.toString());
    if (index >= 0) referenceDisplay.splice(index, 1);
    else referenceDisplay.push(id);

    updateTutorial({ referenceDisplay });
  };

  return (
    <section className={classes.TutorialReview}>
      <fieldset className={`${classes['TutorialReview-Fieldset']} ${classes['TutorialReview-Fieldset_emojiPicker']}`}>
        <Flex justify="start">
          <Dropdown>
            <Avatar
              className={[
                classes['TutorialReview-Fieldset-Avatar'],
                !tutorial.emoji && classes['TutorialReview-Fieldset-Avatar_empty'],
                !tutorial.backgroundColor && classes['TutorialReview-Fieldset-Avatar_nobg'],
              ].join(' ')}
              hexColor={tutorial.backgroundColor}
            >
              {tutorial.emoji || 'NA'}
            </Avatar>
            <Box bem={[['pop']]} className={classes['TutorialReview-Fieldset-Box']}>
              <EmojiPicker onClick={e => updateTutorial({ emoji: e })} />
            </Box>
          </Dropdown>
          <ColorPicker
            className={classes['TutorialReview-Fieldset-Color']}
            color={tutorial.backgroundColor}
            onChange={e => debounceInputChange({ backgroundColor: e.target.value })}
          />
        </Flex>
      </fieldset>
      {endpoints.length > 0 && (
        <fieldset
          className={[classes['TutorialReview-Fieldset'], classes['TutorialReview-Fieldset_endpoints']].join(' ')}
        >
          <Flex align="center" className={classes['TutorialReview-Fieldset-Header']} justify="between">
            {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
            <label className={classes['TutorialReview-Fieldset-Label']}>Show in References</label>
            <Button bem={{ red_text: true }} onClick={() => updateTutorial({ referenceDisplay: [] })} size="sm">
              Clear All
            </Button>
          </Flex>
          <TutorialReferencePicker
            endpoints={endpoints}
            referenceDisplay={tutorial.referenceDisplay}
            setReferenceSelection={setReferenceSelection}
          />
        </fieldset>
      )}
      <fieldset className={classes['TutorialReview-Fieldset']}>
        <Input
          className={classes['TutorialReview-Fieldset-Input']}
          onChange={e => debounceInputChange({ title: e.target.value })}
          placeholder="Tutorial Name"
          required
          value={tutorial.title}
        />
      </fieldset>
      <fieldset className={classes['TutorialReview-Fieldset']}>
        <Textarea
          className={classes['TutorialReview-Fieldset-Input']}
          onChange={e => debounceInputChange({ description: e.target.value })}
          placeholder="Description"
          value={tutorial.description}
        />
      </fieldset>
    </section>
  );
};

TutorialReview.propTypes = {
  debounceInputChange: PropTypes.func,
  endpoints: PropTypes.arrayOf(ApiEndpointProp),
  tutorial: TutorialProp,
  updateTutorial: PropTypes.func,
};

export default TutorialReview;
