import React from 'react';
import PropTypes from 'prop-types';

import ButtonGroup from 'common/button/ButtonGroup';
import TextInput from 'common/form/TextInput';

import InputTitle from '../../common/InputTitle';

import { interviewSensitiveQuestionsMap } from '../../common/optionMap';

const OTHER_VALUE = '其他';

const notOtherValueMap = interviewSensitiveQuestionsMap
  .filter(option => option.value !== OTHER_VALUE)
  .map(option => option.value);

const hasOtherFunc = results =>
  results.filter(result => !notOtherValueMap.includes(result)).length > 0;

const notOtherFunc = results =>
  results.filter(result => notOtherValueMap.includes(result));

const getOtherValue = results =>
  results.find(result => !notOtherValueMap.includes(result));

const InterviewSensitiveQuestions = ({
  interviewSensitiveQuestions,
  onChange,
  submitted,
}) => {
  const hasOther = hasOtherFunc(interviewSensitiveQuestions);
  const resultsBesidesOther = notOtherFunc(interviewSensitiveQuestions);
  const otherValue = getOtherValue(interviewSensitiveQuestions);
  const otherValueIsWarning =
    submitted &&
    (!otherValue || otherValue.length > 20 || otherValue.length === 0);

  const resultsForButtonGroup = hasOther
    ? [...resultsBesidesOther, OTHER_VALUE]
    : [...resultsBesidesOther];

  return (
    <div>
      <InputTitle text="是否有以下特殊問題" />
      {
        <ButtonGroup
          value={resultsForButtonGroup}
          options={interviewSensitiveQuestionsMap}
          onChange={v => {
            const indexOfOther = v.indexOf(OTHER_VALUE);
            if (indexOfOther === -1) {
              return onChange(v);
            }

            const result = [...v];
            result[indexOfOther] = otherValue;
            return onChange(result);
          }}
        />
      }
      {hasOther ? (
        <section
          style={{
            marginTop: '8px',
          }}
        >
          <TextInput
            value={otherValue || ''}
            onChange={e => onChange([...resultsBesidesOther, e.target.value])}
            placeholder="輸入敏感問題"
            warningWording="請輸入 1～20 字"
            isWarning={otherValueIsWarning}
          />
        </section>
      ) : null}
    </div>
  );
};

InterviewSensitiveQuestions.propTypes = {
  interviewSensitiveQuestions: PropTypes.arrayOf(PropTypes.string),
  onChange: PropTypes.func,
};

export default InterviewSensitiveQuestions;
