import Link from 'next/link';

interface TrackingProps {
    tracking: any;
}

const TrackingDetail: React.FC<TrackingProps> = ({ tracking }) => {
    const { history, photo_history } = tracking;

    const dateFormatted = (dateTime: any) => {
        const [day, month, year, hour, minute] = dateTime.split(/-| |:/);

        // Month in JavaScript's Date object is 0-based, so we subtract 1 from the month
        const dateTimes = new Date(year, month - 1, day);
        const formattedDate = dateTimes.toLocaleString('id-ID', {
            year: 'numeric',
            month: 'long',
            day: '2-digit',
        });

        return `${formattedDate} ${hour}:${minute}`;
    };
    return (
        <>
            <hr className="my-2 border-secondary" />
            <div className="mb-5">
                <div className="scroll mx-auto max-h-[300px] max-w-[900px] overflow-y-scroll">
                    {history.toReversed().map((label: any, key: number) => {
                        const formattedDesc = label.desc.replace(/\[|\]/g, '<br>');

                        return (
                            <div className="flex">
                                <p className="min-w-[58px] max-w-[80px] py-2.5 text-xs  text-[#3b3f5c] dark:text-white-light">{dateFormatted(label.date)}</p>
                                <div
                                    className={`relative before:absolute before:left-1/2 before:top-[15px] before:h-2.5 before:w-2.5 before:-translate-x-1/2 before:rounded-full before:border-2 before:border-secondary ${
                                        key !== history.length - 1
                                            ? ' after:absolute after:-bottom-[15px] after:left-1/2 after:top-[25px] after:h-auto after:w-0 after:-translate-x-1/2 after:rounded-full after:border-l-2 after:border-secondary'
                                            : ''
                                    }`}
                                ></div>
                                <div className="self-center p-2.5 ltr:ml-2.5 rtl:ml-2.5 rtl:ltr:mr-2.5">
                                    <p className="text-[13px] font-semibold text-[#3b3f5c] dark:text-white-light" dangerouslySetInnerHTML={{ __html: formattedDesc }} />
                                    {key === 0 && photo_history && photo_history.length > 0 && (
                                        <Link href={photo_history[0].photo1} className="text-primary underline" target="_blank">
                                            view photo
                                        </Link>
                                    )}
                                </div>
                            </div>
                        );
                    })}
                </div>
            </div>
        </>
    );
};
export default TrackingDetail;