content: import PropTypes from 'prop-types';
  import React, { Component } from 'react';
  import AvailabilitySelectInput from 'Components/Form/AvailabilitySelectInput';
  import QualityProfileSelectInputConnector from 'Components/Form/QualityProfileSelectInputConnector';
  import RootFolderSelectInputConnector from 'Components/Form/RootFolderSelectInputConnector';
  import SelectInput from 'Components/Form/SelectInput';
  import SpinnerButton from 'Components/Link/SpinnerButton';
  import PageContentFooter from 'Components/Page/PageContentFooter';
  import { kinds } from 'Helpers/Props';
  import MoveMovieModal from 'Movie/MoveMovie/MoveMovieModal';
  import translate from 'Utilities/String/translate';
  import DeleteMovieModal from './Delete/DeleteMovieModal';
  import MovieEditorFooterLabel from './MovieEditorFooterLabel';
  import TagsModal from './Tags/TagsModal';
  import styles from './MovieEditorFooter.css';
  
  const NO_CHANGE = 'noChange';
  
  class MovieEditorFooter extends Component {
  
    //
    // Lifecycle
  
    constructor(props, context) {
      super(props, context);
  
      this.state = {
        monitored: NO_CHANGE,
        qualityProfileId: NO_CHANGE,
        minimumAvailability: NO_CHANGE,
        rootFolderPath: NO_CHANGE,
        savingTags: false,
        isDeleteMovieModalOpen: false,
        isTagsModalOpen: false,
        isConfirmMoveModalOpen: false,
        destinationRootFolder: null
      };
    }
  
    componentDidUpdate(prevProps) {
      const {
        isSaving,
        saveError
      } = this.props;
  
      if (prevProps.isSaving && !isSaving && !saveError) {
        this.setState({
          monitored: NO_CHANGE,
          qualityProfileId: NO_CHANGE,
          minimumAvailability: NO_CHANGE,
          rootFolderPath: NO_CHANGE,
          savingTags: false
        });
      }
    }
  
    //
    // Listeners
  
    onInputChange = ({ name, value }) => {
      this.setState({ [name]: value });
  
      if (value === NO_CHANGE) {
        return;
      }
  
      switch (name) {
        case 'rootFolderPath':
          this.setState({
            isConfirmMoveModalOpen: true,
            destinationRootFolder: value
          });
          break;
        case 'monitored':
          this.props.onSaveSelected({ [name]: value === 'monitored' });
          break;
        default:
          this.props.onSaveSelected({ [name]: value });
      }
    }
  
    onApplyTagsPress = (tags, applyTags) => {
      this.setState({
        savingTags: true,
        isTagsModalOpen: false
      });
  
      this.props.onSaveSelected({
        tags,
        applyTags
      });
    }
  
    onDeleteSelectedPress = () => {
      this.setState({ isDeleteMovieModalOpen: true });
    }
  
    onDeleteMovieModalClose = () => {
      this.setState({ isDeleteMovieModalOpen: false });
    }
  
    onTagsPress = () => {
      this.setState({ isTagsModalOpen: true });
    }
  
    onTagsModalClose = () => {
      this.setState({ isTagsModalOpen: false });
    }
  
    onSaveRootFolderPress = () => {
      this.setState({
        isConfirmMoveModalOpen: false,
        destinationRootFolder: null
      });
  
      this.props.onSaveSelected({ rootFolderPath: this.state.destinationRootFolder });
    }
  
    onMoveMoviePress = () => {
      this.setState({
        isConfirmMoveModalOpen: false,
        destinationRootFolder: null
      });
  
      this.props.onSaveSelected({
        rootFolderPath: this.state.destinationRootFolder,
        moveFiles: true
      });
    }
  
    //
    // Render
  
    render() {
      const {
        movieIds,
        selectedCount,
        isSaving,
        isDeleting,
        isOrganizingMovie,
        onOrganizeMoviePress
      } = this.props;
  
      const {
        monitored,
        qualityProfileId,
        minimumAvailability,
        rootFolderPath,
        savingTags,
        isTagsModalOpen,
        isDeleteMovieModalOpen,
        isConfirmMoveModalOpen,
        destinationRootFolder
      } = this.state;
  
      const monitoredOptions = [
        { key: NO_CHANGE, value: translate('NoChange'), disabled: true },
        { key: 'monitored', value: translate('Monitored') },
        { key: 'unmonitored', value: translate('Unmonitored') }
      ];
  
      return (
        <PageContentFooter>
          <div className={styles.inputContainer}>
            <MovieEditorFooterLabel
              label={translate('MonitorMovie')}
              isSaving={isSaving && monitored !== NO_CHANGE}
            />
  
            <SelectInput
              name="monitored"
              value={monitored}
              values={monitoredOptions}
              isDisabled={!selectedCount}
              onChange={this.onInputChange}
            />
          </div>
  
          <div className={styles.inputContainer}>
            <MovieEditorFooterLabel
              label={translate('QualityProfile')}
              isSaving={isSaving && qualityProfileId !== NO_CHANGE}
            />
  
            <QualityProfileSelectInputConnector
              name="qualityProfileId"
              value={qualityProfileId}
              includeNoChange={true}
              isDisabled={!selectedCount}
              onChange={this.onInputChange}
            />
          </div>
  
          <div className={styles.inputContainer}>
            <MovieEditorFooterLabel
              label={translate('MinimumAvailability')}
              isSaving={isSaving && minimumAvailability !== NO_CHANGE}
            />
  
            <AvailabilitySelectInput
              name="minimumAvailability"
              value={minimumAvailability}
              includeNoChange={true}
              isDisabled={!selectedCount}
              onChange={this.onInputChange}
            />
          </div>
  
          <div className={styles.inputContainer}>
            <MovieEditorFooterLabel
              label={translate('RootFolder')}
              isSaving={isSaving && rootFolderPath !== NO_CHANGE}
            />
  
            <RootFolderSelectInputConnector
              name="rootFolderPath"
              value={rootFolderPath}
              includeNoChange={true}
              isDisabled={!selectedCount}
              selectedValueOptions={{ includeFreeSpace: false }}
              onChange={this.onInputChange}
            />
          </div>
  
          <div className={styles.buttonContainer}>
            <div className={styles.buttonContainerContent}>
              <MovieEditorFooterLabel
                label={translate('MoviesSelectedInterp', [selectedCount])}
                isSaving={false}
              />
  
              <div className={styles.buttons}>
                <div>
                  <SpinnerButton
                    className={styles.organizeSelectedButton}
                    kind={kinds.WARNING}
                    isSpinning={isOrganizingMovie}
                    isDisabled={!selectedCount || isOrganizingMovie}
                    onPress={onOrganizeMoviePress}
                  >
                    {translate('RenameFiles')}
                  </SpinnerButton>
  
                  <SpinnerButton
                    className={styles.tagsButton}
                    isSpinning={isSaving && savingTags}
                    isDisabled={!selectedCount || isOrganizingMovie}
                    onPress={this.onTagsPress}
                  >
                    {translate('SetTags')}
                  </SpinnerButton>
                </div>
  
                <SpinnerButton
                  className={styles.deleteSelectedButton}
                  kind={kinds.DANGER}
                  isSpinning={isDeleting}
                  isDisabled={!selectedCount || isDeleting}
                  onPress={this.onDeleteSelectedPress}
                >
                  {translate('Delete')}
                </SpinnerButton>
              </div>
            </div>
          </div>
  
          <TagsModal
            isOpen={isTagsModalOpen}
            movieIds={movieIds}
            onApplyTagsPress={this.onApplyTagsPress}
            onModalClose={this.onTagsModalClose}
          />
  
          <DeleteMovieModal
            isOpen={isDeleteMovieModalOpen}
            movieIds={movieIds}
            onModalClose={this.onDeleteMovieModalClose}
          />
  
          <MoveMovieModal
            destinationRootFolder={destinationRootFolder}
            isOpen={isConfirmMoveModalOpen}
            onSavePress={this.onSaveRootFolderPress}
            onMoveMoviePress={this.onMoveMoviePress}
          />
        </PageContentFooter>
      );
    }
  }
  
  MovieEditorFooter.propTypes = {
    movieIds: PropTypes.arrayOf(PropTypes.number).isRequired,
    selectedCount: PropTypes.number.isRequired,
    isSaving: PropTypes.bool.isRequired,
    saveError: PropTypes.object,
    isDeleting: PropTypes.bool.isRequired,
    deleteError: PropTypes.object,
    isOrganizingMovie: PropTypes.bool.isRequired,
    onSaveSelected: PropTypes.func.isRequired,
    onOrganizeMoviePress: PropTypes.func.isRequired
  };
  
  export default MovieEditorFooter;
  