import type { FC } from 'react';
import React, { useCallback, useMemo, useState } from 'react';
import { Button, Modal, Select } from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-frontend';
import { GlyphIcon } from '@theorchard/suite-icons';
import type { Publisher } from 'src/types';

const enum ActionsOptions {
    VIEW = 'view',
    EDIT = 'edit',
    DELETE = 'delete',
}

interface Props {
    publisher: Publisher;
    onPublisherView: (publisher: Publisher) => void;
    onPublisherEdit: (publisher: Publisher) => void;
    onPublisherDelete: (publisher: Publisher) => void;
}

const PublisherDropdown: FC<Props> = ({
    publisher,
    onPublisherView,
    onPublisherEdit,
    onPublisherDelete,
}) => {
    const [deleteModalOpen, setDeleteModalOpen] = useState(false);

    const songWriters = useMemo(
        () => publisher.agreements.filter(a => a.songWriter),
        [publisher.agreements]
    );

    const onView = useCallback(
        () => onPublisherView(publisher),
        [publisher, onPublisherView]
    );
    const onEdit = useCallback(
        () => onPublisherEdit(publisher),
        [publisher, onPublisherEdit]
    );
    const onDelete = useCallback(() => {
        onPublisherDelete(publisher);
        setDeleteModalOpen(false);
    }, [publisher, onPublisherDelete]);

    const options = [
        {
            value: ActionsOptions.VIEW,
            label: formatMessage('generic.view'),
        },
        {
            value: ActionsOptions.EDIT,
            label: formatMessage('generic.edit'),
        },
        {
            value: ActionsOptions.DELETE,
            label: formatMessage('generic.delete'),
            disabled: !!songWriters.length,
        },
    ];

    const onAction = (option?: { value: string }) => {
        switch (option?.value) {
            case ActionsOptions.VIEW:
                onView();
                break;
            case ActionsOptions.EDIT:
                onEdit();
                break;
            case ActionsOptions.DELETE:
                setDeleteModalOpen(true);
                break;
            default:
                break;
        }
    };

    return (
        <>
            <Select
                className="DropdownIconButton actions"
                placeholder=""
                compact
                hideClearButton
                hideFilter
                defaultValue=""
                selectedValue=""
                options={options}
                onSelect={onAction}
                menuWidth={150}
                menuMinWidth={150}
                components={{
                    SelectInput: () => (
                        <Button size="sm" variant="link">
                            <GlyphIcon name="optionsHorizontal" size={16} />
                        </Button>
                    ),
                }}
            />

            <Modal.Custom
                isOpen={deleteModalOpen}
                onRequestClose={() => setDeleteModalOpen(false)}
                header={formatMessage('publishers.deleteModalHeader')}
                customFooter={
                    <footer className="ModalFooter ReactModal-footer">
                        <Button
                            variant="secondary"
                            onClick={() => setDeleteModalOpen(false)}
                        >
                            {formatMessage('publishers.deleteCancellation')}
                        </Button>
                        <Button variant="primary" onClick={onDelete}>
                            {formatMessage('publishers.deleteConfirmation')}
                        </Button>
                    </footer>
                }
            >
                {formatMessage('publishers.deleteWarning')}
            </Modal.Custom>
        </>
    );
};

export default PublisherDropdown;