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

import {
  TextInput,
  FormGroup,
  Checkbox,
} from '../../../../../shared/libs/form';

import * as constants from '../../../constants';
import { DropDown } from '../../../../../components';
import ExtensionsCheckboxList from '../../../modals/ModalTemporalRules/DaysOfTheWeekCheckboxList';
import Accordion from '../../../../Accordion';

/**
 * This function represents the Configuration Tab of the Initial Block.
 *
 * @param {Object} props - Object with props of the component.
 * @param {Object} props.translations - The translations.
 * @param {Array} props.extensions - The extensions of domain.
 * @param {number} props.numSelectedExt - Number of extensions selected.
 *
 * @returns {Object} Returns the JSX.
 */
const Configuration = ({ translations, extensions, numSelectedExt }) => (
  <React.Fragment>
    <FormGroup
      title={translations.getTranslation('initialBlockMenuName')}
      className="gof-blockCardForm-textTitles"
    >
      <TextInput
        placeholder={translations.getTranslation('initialBlockTitle')}
        fieldName={constants.forms.initialBlock.fieldNames.TITLE}
        validationRules={{ maxLength: 50 }}
        validateOnChange
        showErrorFeedback
        messageErrorFeedback={translations.getTranslation('fieldTooLong')}
      />
    </FormGroup>

    <FormGroup
      title={translations.getTranslation('initialBlockOptions')}
      className="gof-blockCardForm-textTitles"
    >
      <div>
        <DropDown
          numSelectedExt={numSelectedExt}
          allLabel={translations.getTranslation('DropDownAll')}
          renderOptions={(options) => {
            if (options.length === 0) {
              return null;
            }
            return (
              <Accordion
                initialBlock
                allowAdd={false}
                id="extentions_accordion"
                data={[
                  {
                    uuid: '',
                    top: `${translations.getTranslation('extensions')}`,
                    content: (
                      <ExtensionsCheckboxList
                        fieldName={constants.forms.initialBlock.fieldNames.EXTENSIONS}
                        options={options}
                        initialBlock
                        persistValueOnUnmount
                      />
                    ),
                  },
                ]}
              />
            );
          }
          }
          allowFilterOptions
          initialBlock
          options={extensions.map(extension => ({
            id: extension.extension,
            label: extension.extension,
          }))}
          value={translations.getTranslation('select')}
          inputPlaceholder={translations.getTranslation('filterInputExtensions').filterPlaceholder}
          noRecordsPlaceholder={translations.getTranslation('filterInputExtensions').noResultsFound}
        />
      </div>
    </FormGroup>

    <FormGroup
      className="container row d-flex justify-content-between gof-blockCardForm-textTitles"
    >
      <Checkbox
        fieldName={constants.forms.initialBlock.fieldNames.CALL_RECORDING}
        labelClassname="gof-form-checkbox__callRecording"
        label={translations.getTranslation(constants.tabsBlockCard.CALL_RECORDING)}
        big
      />
    </FormGroup>
  </React.Fragment>
);
Configuration.propTypes = {
  translations: PropTypes.object.isRequired,
  extensions: PropTypes.arrayOf(PropTypes.any),
  numSelectedExt: PropTypes.number,
};

Configuration.defaultProps = {
  extensions: [],
  numSelectedExt: 0,
};

export default Configuration;