import React, { useState } from 'react';
import { Button, GlyphButton } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import { DeleteContractSummaryNotesModal } from 'src/components/contract-detail/delete-contract-summary-notes-modal';
import { ContractSummaryNotesForm } from 'src/components/contract-summary-notes-form/contract-summary-notes-form';
import RestrictedByAbacusProfileWrapper from 'src/components/restricted-by-abacus-profile-wrapper';
import { generalSectionStyling } from './constants';

export interface ContractSummaryNotesPropsTypes {
    contractName: string;
    summaryNote: string | null;
}

export const ContractSummaryNotes: React.FC<ContractSummaryNotesPropsTypes> = ({
    contractName,
    summaryNote,
}) => {
    const [
        isAddingOrEditingContractSummaryNotes,
        setIsAddingOrEditingContractSummaryNotes,
    ] = useState<boolean>(false);
    const [isDeleteSummaryNotesModalOpen, setIsDeleteSummaryNotesModalOpen] =
        useState<boolean>(false);
    const renderSummaryNotesBlock = () => (
        <div
            className="ContractDetail-Summary-notes"
            data-testid="SummaryNotes"
        >
            <div className="ContractDetail-Summary-notes-header">
                <div className="ContractDetail-Summary-notes-header-left">
                    <span className="ContractDetail-Summary-notes-header-icon">
                        <GlyphIcon name="flag" size={16} />
                    </span>
                    <span className="ContractDetail-Summary-notes-header-text">
                        <h3>Notes</h3>
                    </span>
                </div>
                <RestrictedByAbacusProfileWrapper>
                    <div className="ContractDetail-Summary-notes-buttons">
                        <GlyphButton
                            className="ContractDetail-Summary-notes-editButton"
                            onClick={() =>
                                setIsAddingOrEditingContractSummaryNotes(
                                    !isAddingOrEditingContractSummaryNotes
                                )
                            }
                            variant="secondary"
                            name="edit"
                        />
                        <GlyphButton
                            className="ContractDetail-Summary-notes-deleteButton"
                            onClick={() =>
                                setIsDeleteSummaryNotesModalOpen(
                                    !isDeleteSummaryNotesModalOpen
                                )
                            }
                            variant="danger-secondary"
                            name="trash"
                        />
                    </div>
                </RestrictedByAbacusProfileWrapper>
            </div>
            <div
                className="ContractDetail-Summary-notes-text"
                data-testid="SummaryNotesText"
            >
                {summaryNote}
            </div>
        </div>
    );

    return (
        <div
            className="ContractDetail-Summary"
            style={{ ...generalSectionStyling }}
        >
            <div className="ContractDetail-Summary-header">
                <h2 className="ContractDetail-Summary-header-text">
                    Contract Summary
                </h2>
                {!summaryNote && (
                    <RestrictedByAbacusProfileWrapper>
                        <Button
                            className="ContractDetail-Summary-add-link"
                            onClick={() =>
                                setIsAddingOrEditingContractSummaryNotes(
                                    !isAddingOrEditingContractSummaryNotes
                                )
                            }
                            variant="quartenary"
                        >
                            Add Notes
                        </Button>
                    </RestrictedByAbacusProfileWrapper>
                )}
            </div>
            {summaryNote && renderSummaryNotesBlock()}
            <ContractSummaryNotesForm
                contractName={contractName}
                isSidecarOpen={isAddingOrEditingContractSummaryNotes}
                onRequestCloseSidecar={() =>
                    setIsAddingOrEditingContractSummaryNotes(false)
                }
                summaryNote={summaryNote}
            />
            <DeleteContractSummaryNotesModal
                contractName={contractName}
                isDeleteSummaryNotesModalOpen={isDeleteSummaryNotesModalOpen}
                onRequestCloseDeleteModal={() =>
                    setIsDeleteSummaryNotesModalOpen(false)
                }
            />
        </div>
    );
};