import React, { useState } from 'react';
import {
    SortableContext,
    verticalListSortingStrategy,
} from '@dnd-kit/sortable';
import { Button, Popover, Tooltip } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import SortableContainer from 'src/components/sortableContainer';
import type { VideoProductData } from 'src/types';

interface VolumeContainerProps {
    volume: string[];
    volumeId: number;
    audioProductLabel: string;
    videoThumbnailId: string;
    itemDataMap: Map<string, VideoProductData>;
    handleRemoveVolume: (id: number) => void;
    handleRemoveItem: (id: string) => void;
    handleSelectThumbnail: (id: string) => void;
}

const VolumeContainer = (props: VolumeContainerProps) => {
    const {
        volume,
        volumeId,
        audioProductLabel,
        videoThumbnailId,
        itemDataMap,
        handleRemoveVolume,
        handleRemoveItem,
        handleSelectThumbnail,
    } = props;
    const [isPopoverOpen, setIsPopoverOpen] = useState(false);

    const handleRemoveVolumeClick = () => {
        if (volume.length > 0) {
            setIsPopoverOpen(true);
        } else {
            handleRemoveVolume(volumeId);
        }
    };

    const handleConfirmRemoveVolume = () => {
        handleRemoveVolume(volumeId);
        setIsPopoverOpen(false);
    };

    const handleClosePopover = () => {
        setIsPopoverOpen(false);
    };

    const renderPopoverContent = () => (
        <div className="volume-container-popover">
            <p>{$t('bundles.volumeContainer.volumeDeletionAlert')}</p>
            <div className="volume-container-popover-buttons">
                <Button
                    size="sm"
                    variant="secondary"
                    onClick={handleClosePopover}
                >
                    {$t('bundles.volumeContainer.cancel')}
                </Button>
                <Button
                    size="sm"
                    variant="primary"
                    onClick={handleConfirmRemoveVolume}
                >
                    {$t('bundles.volumeContainer.confirm')}
                </Button>
            </div>
        </div>
    );

    return (
        <div key={`volume-${volumeId}`}>
            {volumeId > 1 ? (
                <div className="volume-label">
                    {`${$t('bundles.sortableList.volumeLabel')} ${volumeId}`}
                    <div>
                        <div
                            className="sortable-item-close"
                            role="button"
                            onClick={handleRemoveVolumeClick}
                            onKeyDown={handleRemoveVolumeClick}
                            tabIndex={0}
                        >
                            <Tooltip
                                id={`close-tooltip-${volumeId}`}
                                message={$t(
                                    'bundles.sortableList.volumeRemoveTooltip'
                                )}
                                placement="right"
                            >
                                <GlyphIcon name="clear" size={16} />
                            </Tooltip>
                        </div>
                        <Popover
                            id={`VolumeRemoveConfirm-${volumeId}`}
                            content={renderPopoverContent()}
                            show={isPopoverOpen}
                            placement="bottom"
                        />
                    </div>
                </div>
            ) : (
                <div className="first-volume-label">
                    {`${$t('bundles.sortableList.volumeLabel')} ${volumeId}`}
                    <span className="first-volume-label-subtitle">
                        {$t('bundles.volumeContainer.volume1Subtitle', {
                            audioProduct: audioProductLabel,
                        })}
                    </span>
                </div>
            )}
            <SortableContext
                id={volumeId.toString()}
                items={volume}
                strategy={verticalListSortingStrategy}
            >
                <SortableContainer
                    itemDataMap={itemDataMap}
                    productIds={volume}
                    volumeId={volumeId}
                    videoThumbnailId={videoThumbnailId}
                    handleRemoveItem={handleRemoveItem}
                    handleSelectThumbnail={handleSelectThumbnail}
                />
            </SortableContext>
        </div>
    );
};

export default VolumeContainer;