import React, { FC } from 'react';
import { Field } from '@orchard/frontend-react-components';
import { Button, Form } from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-frontend';
import { useForm, SubmitHandler } from 'react-hook-form';
import { useUpdateSoundRecordingMutation } from 'src/data/mutations';
import dayjs from 'src/dayjs';
import DataSection from '../dataSection';

export const CLASSNAME = 'TrackMetadata';

interface FormFields {
    recordingVersionTitle: string;
    recordingVersionTitle2: string;
    recordingVersionTitle3: string;
    firstReleaseYear: string;
    duration: string;
}

interface Props {
    setAddRightsInfo: React.Dispatch<React.SetStateAction<boolean>>;
    songId: string;
}

const TrackMetadataContent: FC<Props> = ({ setAddRightsInfo, songId }) => {
    const { updateSong } = useUpdateSoundRecordingMutation({ id: '' });

    const {
        register, handleSubmit, formState: { errors }
    } = useForm<FormFields>({ mode: 'onChange' });

    const formatDuration = (duration: string) => {
        const format = dayjs(duration, 'HH:mm:ss');
        return dayjs.duration({
            hours: format.hour(),
            minutes: format.minute(),
            seconds: format.second()
        }).toISOString();
    };

    const onSubmit: SubmitHandler<FormFields> = data => {
        updateSong({
            variables: {
                id: songId,
                versionTitle1: data.recordingVersionTitle,
                versionTitle2: data.recordingVersionTitle2,
                versionTitle3: data.recordingVersionTitle3,
                firstReleaseYear: parseInt(data.firstReleaseYear, 10),
                duration: formatDuration(data.duration)
            }
        }).then(() => setAddRightsInfo(true));
    };

    const isError = Object.keys(errors).length > 0;

    return (
        <div className={CLASSNAME} data-testid={CLASSNAME}>
            <Form onSubmit={handleSubmit(onSubmit)} className={`${CLASSNAME}-form`}>
                <Field
                    controlId="recordingVersionTitle"
                    labelText={formatMessage('trackMetadata.recordingVersionTitle')}
                >
                    <Form.Control
                        className={`${CLASSNAME}-rec-vers-title-field`}
                        {...register('recordingVersionTitle')}
                        placeholder={formatMessage('trackMetadata.enterRecVersionTitle')}
                        type="text"
                    />
                </Field>
                <Field
                    controlId="recordingVersionTitle2"
                    labelText={`${formatMessage('trackMetadata.recordingVersionTitle')} 2`}
                >
                    <Form.Control
                        className={`${CLASSNAME}-rec-vers-title-field`}
                        {...register('recordingVersionTitle2')}
                        placeholder={`${formatMessage('trackMetadata.enterRecVersionTitle')} 2`}
                        type="text"
                    />
                </Field>
                <Field
                    controlId="recordingVersionTitle3"
                    labelText={`${formatMessage('trackMetadata.recordingVersionTitle')} 3`}
                >
                    <Form.Control
                        className={`${CLASSNAME}-rec-vers-title-field`}
                        {...register('recordingVersionTitle3')}
                        placeholder={`${formatMessage('trackMetadata.enterRecVersionTitle')} 3`}
                        type="text"
                    />
                </Field>
                <Field
                    controlId="firstReleaseYear"
                    labelText={formatMessage('trackMetadata.firstReleaseYear')}
                >
                    <Form.Control
                        className={`${CLASSNAME}-release-year-field`}
                        {...register('firstReleaseYear', { pattern: /^\d\d\d\d$/ })}
                        placeholder={formatMessage('trackMetadata.enterReleaseYear')}
                        type="text"
                    />
                </Field>
                <Field
                    controlId="duration"
                    labelText={formatMessage('trackMetadata.duration')}
                >
                    <Form.Control
                        className={`${CLASSNAME}-duration-field`}
                        {...register('duration', { pattern: /^(\d\d):(\d\d):(\d\d)$/ })}
                        placeholder="HH:MM:SS"
                        type="text"
                    />
                </Field>
                <Button
                    type="next"
                    disabled={isError}
                    className={`${CLASSNAME}-next-button`}
                >
                    {formatMessage('repertoire.next')}
                </Button>
            </Form>
        </div>
    );
};

const TrackMetadata: FC<Props> = ({ setAddRightsInfo, songId }) => (
    <DataSection
        props={{ setAddRightsInfo, songId }}
        headerText={formatMessage('trackMetadata.trackMetadata')}
        Content={TrackMetadataContent}
        className="TrackMetadataSection"
    />
);

export default TrackMetadata;