content: 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 SpinnerButton from 'Components/Link/SpinnerButton';
  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 MoveMovieModal from 'Movie/MoveMovie/MoveMovieModal';
  import translate from 'Utilities/String/translate';
  import styles from './EditMovieModalContent.css';
  
  class EditMovieModalContent extends Component {
  
    //
    // Lifecycle
  
    constructor(props, context) {
      super(props, context);
  
      this.state = {
        isConfirmMoveModalOpen: false
      };
    }
  
    //
    // Listeners
  
    onSavePress = () => {
      const {
        isPathChanging,
        onSavePress
      } = this.props;
  
      if (isPathChanging && !this.state.isConfirmMoveModalOpen) {
        this.setState({ isConfirmMoveModalOpen: true });
      } else {
        this.setState({ isConfirmMoveModalOpen: false });
  
        onSavePress(false);
      }
    };
  
    onMoveMoviePress = () => {
      this.setState({ isConfirmMoveModalOpen: false });
  
      this.props.onSavePress(true);
    };
  
    //
    // Render
  
    render() {
      const {
        title,
        item,
        isSaving,
        originalPath,
        onInputChange,
        onModalClose,
        onDeleteMoviePress,
        ...otherProps
      } = this.props;
  
      const {
        monitored,
        qualityProfileId,
        minimumAvailability,
        // Id,
        path,
        tags
      } = item;
  
      return (
        <ModalContent onModalClose={onModalClose}>
          <ModalHeader>
            {translate('Edit')} - {title}
          </ModalHeader>
  
          <ModalBody>
            <Form
              {...otherProps}
            >
              <FormGroup>
                <FormLabel>{translate('Monitored')}</FormLabel>
  
                <FormInputGroup
                  type={inputTypes.CHECK}
                  name="monitored"
                  helpText={translate('MonitoredHelpText')}
                  {...monitored}
                  onChange={onInputChange}
                />
              </FormGroup>
  
              <FormGroup>
                <FormLabel>{translate('MinimumAvailability')}</FormLabel>
  
                <FormInputGroup
                  type={inputTypes.AVAILABILITY_SELECT}
                  name="minimumAvailability"
                  {...minimumAvailability}
                  onChange={onInputChange}
                />
              </FormGroup>
  
              <FormGroup>
                <FormLabel>{translate('QualityProfile')}</FormLabel>
  
                <FormInputGroup
                  type={inputTypes.QUALITY_PROFILE_SELECT}
                  name="qualityProfileId"
                  {...qualityProfileId}
                  onChange={onInputChange}
                />
              </FormGroup>
  
              <FormGroup>
                <FormLabel>{translate('Path')}</FormLabel>
  
                <FormInputGroup
                  type={inputTypes.PATH}
                  name="path"
                  {...path}
                  onChange={onInputChange}
                />
              </FormGroup>
  
              <FormGroup>
                <FormLabel>{translate('Tags')}</FormLabel>
  
                <FormInputGroup
                  type={inputTypes.TAG}
                  name="tags"
                  {...tags}
                  onChange={onInputChange}
                />
              </FormGroup>
            </Form>
          </ModalBody>
  
          <ModalFooter>
            <Button
              className={styles.deleteButton}
              kind={kinds.DANGER}
              onPress={onDeleteMoviePress}
            >
              {translate('Delete')}
            </Button>
  
            <Button
              onPress={onModalClose}
            >
              {translate('Cancel')}
            </Button>
  
            <SpinnerButton
              isSpinning={isSaving}
              onPress={this.onSavePress}
            >
              {translate('Save')}
            </SpinnerButton>
          </ModalFooter>
  
          <MoveMovieModal
            originalPath={originalPath}
            destinationPath={path.value}
            isOpen={this.state.isConfirmMoveModalOpen}
            onSavePress={this.onSavePress}
            onMoveMoviePress={this.onMoveMoviePress}
          />
        </ModalContent>
      );
    }
  }
  
  EditMovieModalContent.propTypes = {
    movieId: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    item: PropTypes.object.isRequired,
    isSaving: PropTypes.bool.isRequired,
    isPathChanging: PropTypes.bool.isRequired,
    originalPath: PropTypes.string.isRequired,
    onInputChange: PropTypes.func.isRequired,
    onSavePress: PropTypes.func.isRequired,
    onModalClose: PropTypes.func.isRequired,
    onDeleteMoviePress: PropTypes.func.isRequired
  };
  
  export default EditMovieModalContent;
  