import React from 'react';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { Radio, Tooltip } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import { VIDEO_THUMBNAIL_BUTTON_GROUP } from 'src/constants';

interface SortableItemProps {
    id: string;
    label: string;
    thumbnail: string;
    selectedVideoThumbnailId: string;
    handleRemoveItem: () => void;
    handleSelectThumbnail: (id: string) => void;
}

function SortableItem(props: SortableItemProps) {
    const {
        id,
        label,
        thumbnail,
        selectedVideoThumbnailId,
        handleRemoveItem,
        handleSelectThumbnail,
    } = props;

    const { attributes, listeners, setNodeRef, transform, transition } =
        useSortable({ id });

    const style = {
        transform: CSS.Transform.toString(transform),
        transition,
    };

    return (
        <div className="sortable-item" ref={setNodeRef} style={style}>
            <div className="sortable-item-label">
                <div
                    className="sortable-item-handle"
                    {...attributes}
                    {...listeners}
                >
                    <Tooltip
                        id={`drag-tooltip-${id}`}
                        message={$t('bundles.sortableItem.dragTooltipMsg')}
                        placement="left"
                    >
                        <GlyphIcon name="drag" size={16} />
                    </Tooltip>
                </div>
                <Tooltip
                    id={`thumbnail-tooltip-${id}`}
                    message={$t('bundles.sortableItem.thumbnailTooltipMsg')}
                    placement="left"
                >
                    <Radio
                        className="sortable-item-radio-button"
                        onClick={() => {
                            handleSelectThumbnail(id);
                        }}
                        name={VIDEO_THUMBNAIL_BUTTON_GROUP}
                        checked={selectedVideoThumbnailId === id}
                    />
                </Tooltip>
                <img
                    className="sortable-item-thumbnail"
                    src={thumbnail}
                    alt={$t('bundles.sortableItem.thumbnailAltText', {
                        product: label,
                    })}
                />
                <span>{label}</span>
            </div>
            <div
                className="sortable-item-close"
                role="button"
                onClick={handleRemoveItem}
                onKeyDown={handleRemoveItem}
                tabIndex={0}
            >
                <Tooltip
                    id={`close-tooltip-${id}`}
                    message={$t('bundles.sortableItem.closeTooltipMsg')}
                    placement="right"
                >
                    <GlyphIcon name="clear" size={16} />
                </Tooltip>
            </div>
        </div>
    );
}

export default SortableItem;