Lidarr/frontend/src/InteractiveImport/Quality/SelectQualityModalContent.js

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Form from 'Components/Form/Form';
import FormGroup from 'Components/Form/FormGroup';
import FormInputGroup from 'Components/Form/FormInputGroup';
import FormLabel from 'Components/Form/FormLabel';
import Button from 'Components/Link/Button';
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
import ModalBody from 'Components/Modal/ModalBody';
import ModalContent from 'Components/Modal/ModalContent';
import ModalFooter from 'Components/Modal/ModalFooter';
import ModalHeader from 'Components/Modal/ModalHeader';
import { inputTypes, kinds } from 'Helpers/Props';
import translate from 'Utilities/String/translate';

class SelectQualityModalContent extends Component {

  //
  // Lifecycle

  constructor(props, context) {
    super(props, context);

    const {
      qualityId,
      proper,
      real
    } = props;

    this.state = {
      qualityId,
      proper,
      real
    };
  }

  //
  // Listeners

  onQualityChange = ({ value }) => {
    this.setState({ qualityId: parseInt(value) });
  };

  onProperChange = ({ value }) => {
    this.setState({ proper: value });
  };

  onRealChange = ({ value }) => {
    this.setState({ real: value });
  };

  onQualitySelect = () => {
    this.props.onQualitySelect(this.state);
  };

  //
  // Render

  render() {
    const {
      isFetching,
      isPopulated,
      error,
      items,
      onModalClose
    } = this.props;

    const {
      qualityId,
      proper,
      real
    } = this.state;

    const qualityOptions = items.map(({ id, name }) => {
      return {
        key: id,
        value: name
      };
    });

    return (
      <ModalContent onModalClose={onModalClose}>
        <ModalHeader>
          {translate('ManualImport')} - {translate('SelectQuality')}
        </ModalHeader>

        <ModalBody>
          {
            isFetching &&
              <LoadingIndicator />
          }

          {
            !isFetching && !!error &&
              <div>
                {translate('UnableToLoadQualities')}
              </div>
          }

          {
            isPopulated && !error &&
              <Form>
                <FormGroup>
                  <FormLabel>
                    {translate('Quality')}
                  </FormLabel>

                  <FormInputGroup
                    type={inputTypes.SELECT}
                    name="quality"
                    value={qualityId}
                    values={qualityOptions}
                    onChange={this.onQualityChange}
                  />
                </FormGroup>

                <FormGroup>
                  <FormLabel>
                    {translate('Proper')}
                  </FormLabel>

                  <FormInputGroup
                    type={inputTypes.CHECK}
                    name="proper"
                    value={proper}
                    onChange={this.onProperChange}
                  />
                </FormGroup>

                <FormGroup>
                  <FormLabel>
                    {translate('Real')}
                  </FormLabel>

                  <FormInputGroup
                    type={inputTypes.CHECK}
                    name="real"
                    value={real}
                    onChange={this.onRealChange}
                  />
                </FormGroup>
              </Form>
          }
        </ModalBody>

        <ModalFooter>
          <Button onPress={onModalClose}>
            {translate('Cancel')}
          </Button>

          <Button
            kind={kinds.SUCCESS}
            onPress={this.onQualitySelect}
          >
            {translate('SelectQuality')}
          </Button>
        </ModalFooter>
      </ModalContent>
    );
  }
}

SelectQualityModalContent.propTypes = {
  qualityId: PropTypes.number.isRequired,
  proper: PropTypes.bool.isRequired,
  real: PropTypes.bool.isRequired,
  isFetching: PropTypes.bool.isRequired,
  isPopulated: PropTypes.bool.isRequired,
  error: PropTypes.object,
  items: PropTypes.arrayOf(PropTypes.object).isRequired,
  onQualitySelect: PropTypes.func.isRequired,
  onModalClose: PropTypes.func.isRequired
};

export default SelectQualityModalContent;