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

interface Props {
    tableCount: number;
    sizeMb: number;
    totalRecords: number;
    selectedTableName?: string | null;
    selectedTableSizeMb?: number;
    loading?: boolean;
}

const valueOrLoading = (value: string | number, loading?: boolean) => (loading ? '...' : value);

const DatabaseContentOverview = ({
    tableCount,
    sizeMb,
    totalRecords,
    selectedTableName,
    selectedTableSizeMb,
    loading,
}: Props) => {
    const showSelectedTableSize = !!selectedTableName && selectedTableSizeMb !== undefined;

    return (
        <GreyRowBox $hoverable={false} css={tw`flex-wrap md:flex-nowrap`}>
            <div css={tw`flex-1 min-w-[10rem]`}>
                <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`}>{valueOrLoading(tableCount, loading)}</span>
                </p>
                <p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Tables</p>
            </div>
            <div css={tw`flex-1 min-w-[10rem] mt-4 md:mt-0`}>
                <p css={tw`text-sm text-neutral-100 flex items-center`}>
                    <FontAwesomeIcon icon={faHdd} fixedWidth css={tw`text-neutral-400`} />
                    <span css={tw`ml-2`}>
                        {valueOrLoading(
                            `${(showSelectedTableSize ? selectedTableSizeMb! : sizeMb).toFixed(2)} MB`,
                            loading
                        )}
                    </span>
                </p>
                <p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>
                    {showSelectedTableSize ? 'Table size' : 'Size'}
                </p>
            </div>
            <div css={tw`flex-1 min-w-[10rem] mt-4 md:mt-0`}>
                <p css={tw`text-sm text-neutral-100 flex items-center`}>
                    <FontAwesomeIcon icon={faListOl} fixedWidth css={tw`text-neutral-400`} />
                    <span css={tw`ml-2`}>{valueOrLoading(totalRecords, loading)}</span>
                </p>
                <p css={tw`mt-1 text-2xs text-neutral-500 uppercase select-none`}>Rows</p>
            </div>
        </GreyRowBox>
    );
};

export default DatabaseContentOverview;