import React from 'react';
import tw from 'twin.macro';
import GreyRowBox from '@/components/elements/GreyRowBox';
import { Button } from '@/components/elements/button';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus, faTable, faTrashAlt } from '@fortawesome/free-solid-svg-icons';

interface Props {
    tables: string[];
    selectedTable?: string | null;
    loading?: boolean;
    actionsDisabled?: boolean;
    onSelectTable?: (table: string) => void;
    onCreateTable?: () => void;
    onDeleteTable?: (table: string) => void;
}

const TableSidebar = ({
    tables,
    selectedTable,
    loading,
    actionsDisabled,
    onSelectTable,
    onCreateTable,
    onDeleteTable,
}: Props) => {
    return (
        <GreyRowBox $hoverable={false} css={tw`block p-4 h-[30rem] max-h-[30rem]`}>
            <div css={tw`flex items-center justify-between mb-3`}>
                <p css={tw`text-sm text-neutral-100 flex items-center`}>
                    <FontAwesomeIcon icon={faTable} fixedWidth css={tw`text-neutral-400`} />
                    <span css={tw`ml-2`}>Tables</span>
                </p>
                <p css={tw`text-2xs text-neutral-500 uppercase select-none`}>{loading ? '...' : tables.length}</p>
            </div>

            <Button
                type={'button'}
                size={Button.Sizes.Small}
                className={'w-full mb-3'}
                disabled={!!loading || !!actionsDisabled}
                onClick={() => onCreateTable && onCreateTable()}
            >
                <FontAwesomeIcon icon={faPlus} fixedWidth />
                <span css={tw`ml-2`}>New table</span>
            </Button>

            <div css={tw`h-[22.75rem] overflow-y-auto border border-neutral-600 rounded`}>
                {loading ? (
                    <p css={tw`text-sm text-neutral-400 px-3 py-2`}>Loading tables...</p>
                ) : tables.length < 1 ? (
                    <p css={tw`text-sm text-neutral-400 px-3 py-2`}>No tables yet.</p>
                ) : (
                    tables.map((table, index) => (
                        <div key={table}>
                            <div
                                css={[
                                    tw`flex items-center px-3 py-2`,
                                    selectedTable === table ? tw`bg-neutral-600` : tw`bg-transparent`,
                                ]}
                            >
                                <button
                                    type={'button'}
                                    css={[
                                        tw`text-sm truncate text-left flex-1 mr-2`,
                                        selectedTable === table
                                            ? tw`text-neutral-100 font-semibold`
                                            : tw`text-neutral-200`,
                                    ]}
                                    onClick={() => onSelectTable && onSelectTable(table)}
                                    title={table}
                                >
                                    {table}
                                </button>
                                {onDeleteTable && (
                                    <Button
                                        type={'button'}
                                        variant={Button.Variants.Secondary}
                                        size={Button.Sizes.Small}
                                        shape={Button.Shapes.IconSquare}
                                        disabled={!!loading || !!actionsDisabled}
                                        onClick={() => onDeleteTable(table)}
                                        title={`Delete ${table}`}
                                        aria-label={`Delete ${table}`}
                                    >
                                        <FontAwesomeIcon icon={faTrashAlt} fixedWidth />
                                    </Button>
                                )}
                            </div>
                            {index < tables.length - 1 && <div css={tw`h-px bg-neutral-600`} />}
                        </div>
                    ))
                )}
            </div>
        </GreyRowBox>
    );
};

export default TableSidebar;