import React, { useCallback, useMemo, useState } from 'react';
import Alert from 'Components/Alert';
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 { EnhancedSelectInputValue } from 'Components/Form/Select/EnhancedSelectInput';
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 Quality, { QualityModel } from 'Quality/Quality';
import { useQualityProfileSchema } from 'Settings/Profiles/Quality/useQualityProfiles';
import { InputChanged } from 'typings/inputs';
import getQualities from 'Utilities/Quality/getQualities';
import translate from 'Utilities/String/translate';

interface SelectQualityModalContentProps {
  qualityId: number;
  proper: boolean;
  real: boolean;
  modalTitle: string;
  onQualitySelect(quality: QualityModel): void;
  onModalClose(): void;
}

function SelectQualityModalContent(props: SelectQualityModalContentProps) {
  const { modalTitle, onQualitySelect, onModalClose } = props;

  const [qualityId, setQualityId] = useState(props.qualityId);
  const [proper, setProper] = useState(props.proper);
  const [real, setReal] = useState(props.real);

  const { schema, isSchemaFetching, isSchemaFetched, schemaError } =
    useQualityProfileSchema(true);

  const items = useMemo(() => {
    return getQualities(schema.items);
  }, [schema]);

  const qualityOptions = useMemo(() => {
    return items.map(({ id, name }): EnhancedSelectInputValue<number> => {
      return {
        key: id,
        value: name,
      };
    });
  }, [items]);

  const onQualityChange = useCallback(
    ({ value }: { value: number }) => {
      setQualityId(value);
    },
    [setQualityId]
  );

  const onProperChange = useCallback(
    ({ value }: InputChanged<boolean>) => {
      setProper(value);
    },
    [setProper]
  );

  const onRealChange = useCallback(
    ({ value }: InputChanged<boolean>) => {
      setReal(value);
    },
    [setReal]
  );

  const onQualitySelectWrapper = useCallback(() => {
    const quality = items.find((item) => item.id === qualityId) as Quality;

    const revision = {
      version: proper ? 2 : 1,
      real: real ? 1 : 0,
      isRepack: false,
    };

    onQualitySelect({
      quality,
      revision,
    });
  }, [items, qualityId, proper, real, onQualitySelect]);

  return (
    <ModalContent onModalClose={onModalClose}>
      <ModalHeader>{modalTitle} - Select Quality</ModalHeader>

      <ModalBody>
        {isSchemaFetching ? <LoadingIndicator /> : null}

        {!isSchemaFetching && schemaError ? (
          <Alert kind={kinds.DANGER}>{translate('QualitiesLoadError')}</Alert>
        ) : null}

        {isSchemaFetched && !schemaError ? (
          <Form>
            <FormGroup>
              <FormLabel>{translate('Quality')}</FormLabel>

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

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

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

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

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

      <ModalFooter>
        <Button onPress={onModalClose}>Cancel</Button>

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

export default SelectQualityModalContent;
