import React, { useEffect, useState } from 'react';
import {
    Button,
    Col,
    Form,
    SkeletonLoader,
} from '@theorchard/suite-components';
import { isEmpty } from 'lodash-es';
import { Link, useHistory, useParams } from 'react-router-dom';
import { useUpdateContract } from 'src/apollo/mutations/contract';
import { useContract } from 'src/apollo/queries/contract';
import { useContractBreadcrumbs } from 'src/hooks/breadcrumbs/contract';
import { getContractDetail } from 'src/urls/frontend-royalties';
import { PageHeader } from '../shared/pageHeader';
import type { GeneralNoteData } from 'src/types/abacus-contract';
import './style.scss';

export const GeneralNoteForm: React.FC = () => {
    const { contractId } = useParams<{ contractId: string }>();
    const [errors, setErrors] = useState([]);
    const [formData, setFormData] = useState<GeneralNoteData>({});
    const updateGeneralNoteData = useUpdateContract(contractId);
    const breadcrumbs = useContractBreadcrumbs('Notes');

    const history = useHistory();

    const { data, loading: isContractLoading } = useContract(contractId);

    const onChange = (event: any) => {
        const {
            target: { name, value },
        } = event;
        setFormData({ ...formData, [name]: value });
        setErrors([]);
    };

    const submitHandler = () => {
        const variables = {
            contractId,
            generalNote: String(formData.generalNote) || null,
        };
        setErrors([]);
        updateGeneralNoteData({ variables })
            .then(() => history.push(getContractDetail(contractId)))
            .catch(error => setErrors(error));
    };

    useEffect(() => {
        if (!isEmpty(data) && !isEmpty(data?.abacusContract?.generalNote)) {
            const generalNote = data?.abacusContract?.generalNote;
            setFormData({ generalNote });
        }
    }, [data]);

    if (isContractLoading) return <SkeletonLoader />;

    return (
        <div className="GeneralNoteForm">
            <PageHeader title="Notes" breadcrumbs={breadcrumbs} />
            <div>
                <Col sm={8}>
                    <Form.Group controlId="GeneralNotes">
                        <Form.Control
                            as="textarea"
                            placeholder="Add your notes here"
                            className={`generalNote ${errors ? 'error' : ''}`}
                            data-testid="input-general-note"
                            name="generalNote"
                            onChange={onChange}
                            type="text"
                            value={formData.generalNote || ''}
                            rows={5}
                        />
                    </Form.Group>
                    {errors && <span className="error-msg">{errors}</span>}
                </Col>
            </div>

            <div>
                <Col sm={8} className="d-flex justify-content-end mt-3">
                    <Link to={getContractDetail(contractId)} className="mr-2">
                        <Button>Cancel</Button>
                    </Link>
                    <Button onClick={submitHandler} variant="primary">
                        Save
                    </Button>
                </Col>
            </div>
        </div>
    );
};