content: import _ from 'lodash';
  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 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 } from 'Helpers/Props';
  import translate from 'Utilities/String/translate';
  
  const posterSizeOptions = [
    { key: 'small', value: translate('Small') },
    { key: 'medium', value: translate('Medium') },
    { key: 'large', value: translate('Large') }
  ];
  
  class MovieIndexPosterOptionsModalContent extends Component {
  
    //
    // Lifecycle
  
    constructor(props, context) {
      super(props, context);
  
      this.state = {
        detailedProgressBar: props.detailedProgressBar,
        size: props.size,
        showTitle: props.showTitle,
        showMonitored: props.showMonitored,
        showQualityProfile: props.showQualityProfile,
        showCinemaRelease: props.showCinemaRelease,
        showReleaseDate: props.showReleaseDate,
        showSearchAction: props.showSearchAction
      };
    }
  
    componentDidUpdate(prevProps) {
      const {
        detailedProgressBar,
        size,
        showTitle,
        showMonitored,
        showQualityProfile,
        showCinemaRelease,
        showReleaseDate,
        showSearchAction
      } = this.props;
  
      const state = {};
  
      if (detailedProgressBar !== prevProps.detailedProgressBar) {
        state.detailedProgressBar = detailedProgressBar;
      }
  
      if (size !== prevProps.size) {
        state.size = size;
      }
  
      if (showTitle !== prevProps.showTitle) {
        state.showTitle = showTitle;
      }
  
      if (showMonitored !== prevProps.showMonitored) {
        state.showMonitored = showMonitored;
      }
  
      if (showQualityProfile !== prevProps.showQualityProfile) {
        state.showQualityProfile = showQualityProfile;
      }
  
      if (showCinemaRelease !== prevProps.showCinemaRelease) {
        state.showCinemaRelease = showCinemaRelease;
      }
  
      if (showReleaseDate !== prevProps.showReleaseDate) {
        state.showReleaseDate = showReleaseDate;
      }
  
      if (showSearchAction !== prevProps.showSearchAction) {
        state.showSearchAction = showSearchAction;
      }
  
      if (!_.isEmpty(state)) {
        this.setState(state);
      }
    }
  
    //
    // Listeners
  
    onChangePosterOption = ({ name, value }) => {
      this.setState({
        [name]: value
      }, () => {
        this.props.onChangePosterOption({ [name]: value });
      });
    };
  
    //
    // Render
  
    render() {
      const {
        onModalClose
      } = this.props;
  
      const {
        detailedProgressBar,
        size,
        showTitle,
        showMonitored,
        showQualityProfile,
        showCinemaRelease,
        showReleaseDate,
        showSearchAction
      } = this.state;
  
      return (
        <ModalContent onModalClose={onModalClose}>
          <ModalHeader>
            {translate('PosterOptions')}
          </ModalHeader>
  
          <ModalBody>
            <Form>
              <FormGroup>
                <FormLabel>{translate('PosterSize')}</FormLabel>
  
                <FormInputGroup
                  type={inputTypes.SELECT}
                  name="size"
                  value={size}
                  values={posterSizeOptions}
                  onChange={this.onChangePosterOption}
                />
              </FormGroup>
  
              <FormGroup>
                <FormLabel>{translate('DetailedProgressBar')}</FormLabel>
  
                <FormInputGroup
                  type={inputTypes.CHECK}
                  name="detailedProgressBar"
                  value={detailedProgressBar}
                  helpText={translate('DetailedProgressBarHelpText')}
                  onChange={this.onChangePosterOption}
                />
              </FormGroup>
  
              <FormGroup>
                <FormLabel>{translate('ShowTitle')}</FormLabel>
  
                <FormInputGroup
                  type={inputTypes.CHECK}
                  name="showTitle"
                  value={showTitle}
                  helpText={translate('ShowTitleHelpText')}
                  onChange={this.onChangePosterOption}
                />
              </FormGroup>
  
              <FormGroup>
                <FormLabel>{translate('ShowMonitored')}</FormLabel>
  
                <FormInputGroup
                  type={inputTypes.CHECK}
                  name="showMonitored"
                  value={showMonitored}
                  helpText={translate('ShowMonitoredHelpText')}
                  onChange={this.onChangePosterOption}
                />
              </FormGroup>
  
              <FormGroup>
                <FormLabel>{translate('ShowQualityProfile')}</FormLabel>
  
                <FormInputGroup
                  type={inputTypes.CHECK}
                  name="showQualityProfile"
                  value={showQualityProfile}
                  helpText={translate('ShowQualityProfileHelpText')}
                  onChange={this.onChangePosterOption}
                />
              </FormGroup>
  
              <FormGroup>
                <FormLabel>{translate('ShowCinemaRelease')}</FormLabel>
  
                <FormInputGroup
                  type={inputTypes.CHECK}
                  name="showCinemaRelease"
                  value={showCinemaRelease}
                  helpText={translate('showCinemaReleaseHelpText')}
                  onChange={this.onChangePosterOption}
                />
              </FormGroup>
  
              <FormGroup>
                <FormLabel>{translate('ShowReleaseDate')}</FormLabel>
  
                <FormInputGroup
                  type={inputTypes.CHECK}
                  name="showReleaseDate"
                  value={showReleaseDate}
                  helpText={translate('ShowReleaseDateHelpText')}
                  onChange={this.onChangePosterOption}
                />
              </FormGroup>
  
              <FormGroup>
                <FormLabel>{translate('ShowSearch')}</FormLabel>
  
                <FormInputGroup
                  type={inputTypes.CHECK}
                  name="showSearchAction"
                  value={showSearchAction}
                  helpText={translate('ShowSearchHelpText')}
                  onChange={this.onChangePosterOption}
                />
              </FormGroup>
            </Form>
          </ModalBody>
  
          <ModalFooter>
            <Button
              onPress={onModalClose}
            >
              {translate('Close')}
            </Button>
          </ModalFooter>
        </ModalContent>
      );
    }
  }
  
  MovieIndexPosterOptionsModalContent.propTypes = {
    size: PropTypes.string.isRequired,
    showTitle: PropTypes.bool.isRequired,
    showMonitored: PropTypes.bool.isRequired,
    showQualityProfile: PropTypes.bool.isRequired,
    detailedProgressBar: PropTypes.bool.isRequired,
    showCinemaRelease: PropTypes.bool.isRequired,
    showReleaseDate: PropTypes.bool.isRequired,
    showSearchAction: PropTypes.bool.isRequired,
    onChangePosterOption: PropTypes.func.isRequired,
    onModalClose: PropTypes.func.isRequired
  };
  
  export default MovieIndexPosterOptionsModalContent;
  