import React from 'react';
import { Button, Section } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import { isEmpty } from 'lodash-es';
import { Link } from 'react-router-dom';
import RestrictedByAbacusProfileWrapper from 'src/components/restricted-by-abacus-profile-wrapper';
import { NO_GENERAL_NOTE } from 'src/constants';
import { updateGeneralNote } from 'src/urls/frontend-royalties';

export interface ContractNoteProps {
    contractId: string;
    generalNote: string;
}

export const ContractNotes: React.FC<ContractNoteProps> = ({
    contractId,
    generalNote,
}) => {
    return (
        <Section className="ContractDetail-Notes">
            <Section.Header>
                <div className="d-flex flex-column" style={{ width: '100%' }}>
                    <div className="d-flex flex-row align-items-center">
                        <Section.Title className="h3">
                            Additional Notes
                        </Section.Title>
                        <RestrictedByAbacusProfileWrapper>
                            {isEmpty(generalNote) ? (
                                <Link
                                    className="ml-auto"
                                    data-testid="contractNoteEditBtnTestId"
                                    to={updateGeneralNote(contractId)}
                                >
                                    <Button variant="primary">
                                        <GlyphIcon name="plus" size={12} />
                                        Add
                                    </Button>
                                </Link>
                            ) : (
                                <Link
                                    className="ContractDetail-Notes-Edit ml-auto"
                                    data-testid="contractNoteEditBtnTestId"
                                    to={updateGeneralNote(contractId)}
                                >
                                    <GlyphIcon name="edit" size={16} />
                                </Link>
                            )}
                        </RestrictedByAbacusProfileWrapper>
                    </div>
                </div>
            </Section.Header>
            <Section.Body>
                <Section>
                    <Section.Body>
                        {isEmpty(generalNote) ? (
                            <div>
                                <span className="mb-2 text-muted">
                                    {NO_GENERAL_NOTE}
                                </span>
                            </div>
                        ) : (
                            <div className="ContractDetail-Notes-text">
                                {generalNote}
                            </div>
                        )}
                    </Section.Body>
                </Section>
            </Section.Body>
        </Section>
    );
};