import React, { useState } from 'react';
import {
    Button,
    GlyphButton,
    useFullscreenModal,
} from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import { useHistory } from 'react-router-dom';
import { DeleteContractFlowthroughModal } from 'src/components/contract-detail/delete-contract-flowthrough-modal';
import { createContractFlowthrough } from 'src/urls/frontend-royalties';
import { ContractFlowthroughSidecar } from '../contract-flowthrough/contract-flowthrough-sidecar';
import type { AbacusContractFlowthrough } from 'src/types/abacus-contract-flowthrough';

export interface ContractFlowthroughButtonsProps {
    contractId: string;
    contractFlowthrough: AbacusContractFlowthrough | null;
}

export const ContractFlowthroughButtons: React.FC<
    ContractFlowthroughButtonsProps
> = ({ contractFlowthrough, contractId }) => {
    const [
        isDeleteFlowthroughModalOpen,
        setIsDeleteContractFlowthroughModalOpen,
    ] = useState<boolean>(false);
    const [isSidecarOpen, setIsSidecarOpen] = useState<boolean>(false);
    const history = useHistory();
    const { open } = useFullscreenModal();
    const openModal = () => {
        open(() => history.push(createContractFlowthrough(contractId)));
    };

    return (
        <div className="ContractDetail-flowthrough-buttons ml-auto">
            {!contractFlowthrough ? (
                <Button
                    className="ContractDetail-flowthrough-addButton"
                    onClick={() => openModal()}
                    variant="primary"
                >
                    <GlyphIcon name="plus" size={12} />
                    Add
                </Button>
            ) : (
                <>
                    <GlyphButton
                        className="ContractDetail-flowthrough-editButton"
                        onClick={() => setIsSidecarOpen(true)}
                        variant="secondary"
                        name="edit"
                    />
                    <ContractFlowthroughSidecar
                        contractFlowthrough={contractFlowthrough}
                        isSidecarOpen={isSidecarOpen}
                        setIsSidecarOpen={setIsSidecarOpen}
                    />
                    <GlyphButton
                        className="ContractDetail-flowthrough-deleteButton"
                        onClick={() =>
                            setIsDeleteContractFlowthroughModalOpen(
                                !isDeleteFlowthroughModalOpen
                            )
                        }
                        variant="secondary"
                        name="trash"
                    />
                    <DeleteContractFlowthroughModal
                        contractName={contractFlowthrough.contract.contractName}
                        contractFlowthroughId={
                            contractFlowthrough.contractFlowthroughId
                        }
                        isDeleteFlowthroughModalOpen={
                            isDeleteFlowthroughModalOpen
                        }
                        onRequestCloseDeleteModal={() =>
                            setIsDeleteContractFlowthroughModalOpen(false)
                        }
                    />
                </>
            )}
        </div>
    );
};