import React from 'react';
import { TrashIcon } from '@heroicons/react/outline';
import GreyRowBox from '@/components/elements/GreyRowBox';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import Tooltip from '@/components/elements/tooltip/Tooltip';
import { Button } from '@/components/elements/button/index';
import { ImporterProfile } from '../../../api/server/importer/profiles';

interface Props {
    profiles: ImporterProfile[];
    selectedId: number | null;
    loading: boolean;
    onSelect: (profile: ImporterProfile) => void;
    onDelete: (profile: ImporterProfile) => void;
}

export default ({ profiles, selectedId, loading, onSelect, onDelete }: Props) => (
    <div className={'relative space-y-2'}>
        <SpinnerOverlay visible={loading} />
        {profiles.length === 0 && !loading ? (
            <GreyRowBox $hoverable={false} className={'!bg-neutral-800 !p-3'}>
                <p className={'text-sm text-neutral-400'}>No saved profiles.</p>
            </GreyRowBox>
        ) : (
            profiles.map((profile) => {
                const selected = selectedId === profile.id;

                return (
                    <GreyRowBox
                        $hoverable={false}
                        key={profile.id}
                        onClick={() => onSelect(profile)}
                        className={'relative cursor-pointer !border-0 !bg-neutral-800 !p-0'}
                    >
                        {selected && <span className={'absolute inset-y-0 left-0 w-1 bg-neutral-500'} />}
                        <div className={'min-w-0 flex-1 py-3 pl-4 pr-2'}>
                            <p className={`truncate text-sm ${selected ? 'text-neutral-100' : 'text-neutral-300'}`}>{profile.name}</p>
                        </div>
                        <Tooltip content={'Delete profile'} placement={'top'}>
                            <Button.Text
                                type={'button'}
                                size={Button.Sizes.Small}
                                shape={Button.Shapes.IconSquare}
                                variant={Button.Variants.Secondary}
                                onClick={(e) => {
                                    e.stopPropagation();
                                    onDelete(profile);
                                }}
                                className={'mr-2'}
                            >
                                <TrashIcon className={'h-4 w-4 text-neutral-300'} />
                            </Button.Text>
                        </Tooltip>
                    </GreyRowBox>
                );
            })
        )}
    </div>
);