import React from 'react';
import { classNamesTailwind } from '../utils/theme';
import { Location } from './LocationFinder';

interface LocationFinderLocationProps {
    location: Location;
    showDistance: boolean;
    onClick(location: Location): void;
    classNameListItemWrapper?: string;
    classNameListItem?: string;
    classNameListItemDistance?: string;
    classNameListItemDistanceKm?: string;
    classNameListItemDistanceKmLabel?: string;
    classNameListItemTitle?: string;
    classNameListItemStreet?: string;
}

export const zeroPad = (num: number) => String(num).padStart(2, '0');

const LocationFinderLocation = ({
    showDistance,
    location,
    classNameListItem,
    classNameListItemWrapper,
    classNameListItemDistance,
    classNameListItemDistanceKm,
    classNameListItemDistanceKmLabel,
    classNameListItemTitle,
    classNameListItemStreet,
    onClick
}: LocationFinderLocationProps) => {
    const hasDistance = showDistance && location.distance !== undefined;

    const date = new Date();
    const day = date.getDay();
    const hours = date.getHours();

    const currentOpeningHour = location.openingHours ? location.openingHours.days[day] : undefined;
    // prettier-ignore
    const currentOpeningHourSlot = (currentOpeningHour?.slots && Boolean(currentOpeningHour.slots.length) ? currentOpeningHour.slots.at(-1) : undefined);
    // prettier-ignore
    const currentOpeningHourSlotLabel = currentOpeningHourSlot ? `${zeroPad(currentOpeningHourSlot.to.hours)}:${zeroPad(currentOpeningHourSlot.to.minutes)}` : undefined;
    const openIndicator: boolean = currentOpeningHourSlot ? currentOpeningHourSlot.to.hours >= hours : false;

    return (
        <li
            className={classNamesTailwind('hover:bg-gray-50 hover:cursor-pointer', classNameListItemWrapper)}
            onClick={() => onClick(location)}
        >
            <div className={classNamesTailwind('flex items-center text-sm text-gray-500 px-4 py-4 overflow-hidden', classNameListItem)}>
                {hasDistance && (
                    <span
                        className={classNamesTailwind(
                            'bg-indigo-50 rounded-full inline-flex w-12 h-12 items-center justify-center flex-col leading-[1.2] text-xs text-indigo-600 mr-4',
                            classNameListItemDistance
                        )}
                    >
                        <span className={classNamesTailwind('font-bold', classNameListItemDistanceKm)}>
                            {hasDistance ? location.distance?.toFixed(1) : 0}
                        </span>
                        <span className={classNameListItemDistanceKmLabel}>km</span>
                    </span>
                )}
                <div className={classNamesTailwind('min-w-0 flex-1')}>
                    <div className="flex flex-col text-sm">
                        <span className={classNamesTailwind('truncate font-medium text-indigo-600 block', classNameListItemTitle)}>
                            {location.title}
                        </span>
                        <address className={classNamesTailwind('font-normal text-gray-500 not-italic', classNameListItemStreet)}>
                            {location.street}, {location.city}
                        </address>
                    </div>
                    {currentOpeningHourSlotLabel ? (
                        <div className="mt-2 flex items-center">
                            <span
                                className={classNamesTailwind('w-2 h-2 bg-red-400 rounded-3xl mr-1', { 'bg-green-400': openIndicator })}
                            />
                            <span>Open tot {currentOpeningHourSlotLabel}</span>
                        </div>
                    ) : (
                        currentOpeningHour &&
                        currentOpeningHour.closed && (
                            <div className="mt-2 flex items-center">
                                <span>Gesloten</span>
                            </div>
                        )
                    )}
                </div>
            </div>
        </li>
    );
};

export default LocationFinderLocation;
