mwitnessing/components/publisher/ShiftsList.tsx

import React, { useState, useEffect } from "react";
import toast from "react-hot-toast";
import { useRouter } from "next/router";
import Link from "next/link";
import axiosInstance from '../../src/axiosSecure';

import { monthNamesBG, GetTimeFormat, GetDateFormat } from "../../src/helpers/const"
import common from "../../src/helpers/common";

type Assignments = {
    items: {
        [key: string]: any[];
    };
    keys: string[];
    months: {
        [key: string]: string;
    };
};

type ShiftsListProps = {
    assignments: Assignments;
    selectedtab: string;
};


const ShiftsList = ({ assignments, selectedtab }: ShiftsListProps) => {

    const { keys: assignmentKeys = [], months = [], items = [] } = assignments || {};
    const [currentTab, setCurrentTab] = useState<string>(selectedtab || assignmentKeys[-1]);

    console.log("assignments = ", assignments);
    console.log("currentTab = ", currentTab);

    const searchReplacement = async (id) => {
        try {
            var assignment = (await axiosInstance.get("/api/data/assignments/" + id)).data;
            assignment.isConfirmed = false;
            // ! assignment.isTentative = true;
            // assignment.isDeleted = true;
            await axiosInstance.put("/api/data/assignments/" + id, assignment);
            toast.success("Shift Tentative", {
                position: "bottom-center",
            });
            // router.push(urls.indexUrl);
        } catch (error) {
            console.log(JSON.stringify(error));
            toast.error(error.response.data.message);
        }
    }
    const AddToGoogleCalendar = async (id) => {
        try {
            const { url, event } = await axiosInstance.get(`/api/shiftgenerate?action=createcalendarevent&id=${id}`, {
                headers: {
                    'Content-Type': 'application/json',
                },
            });

            window.open(url, '_blank')
                .addEventListener('load', function () {
                    console.log('loaded');
                });

            // fetchShifts();
            // console.log(shifts);
            res.writeHead(301, { "Location": url });
            res.end();

        } catch (error) {
            console.log(error);

            console.log(JSON.stringify(error));
            if (error.response?.data?.message) {
                toast.error(error.response.data.message);
            }
        }
    }



    return (
        <div className="flex flex-col m-5 w-full">
            <ul className="nav nav-tabs flex flex-col md:flex-row flex-wrap list-none border-b-0 pl-0 mb-1" role="tablist">
                {assignmentKeys?.slice(-4).map(m => (
                    <li key={m.toString()} className="nav-item">
                        <a
                            href="#"
                            onClick={() => setCurrentTab(m)}
                            className={`text-blue-500 border-l border-t border-r inline-block py-2 px-4 ${currentTab === m ? 'active border-gray-300 font-bold' : ' border-transparent'}`}
                            // className={`nav-link block font-medium text-xs leading-tight uppercase border-x-0 border-t-0 border-b-2 ${currentTab === m ? "active border-blue-500 font-bold" : "border-transparent"} px-6 py-3 my-2 hover:border-transparent hover:bg-gray-100 focus:border-transparent`}
                            role="tab"
                            aria-controls={"tabs-" + m}
                            aria-selected={currentTab === m}
                        >
                            {months[m]}
                        </a>
                    </li>
                ))}
            </ul>
            <div className="tab-content flex flow w-full p-2 border-2 border-gray-300 rounded-md">
                {assignmentKeys?.map(month => (
                    // <div className={`tab-pane fade ${month === currentTab ? "active show" : ""}`} key={month.toString()} role="tabpanel" aria-labelledby={"tabs-tab" + month}>
                    //if tab is selected
                    //common.getCurrentYearMonth(month) 
                    currentTab === month ?
                        <div key={month} className={`tab-pane fade ${month === currentTab ? "active show" : ""}`} role="tabpanel" aria-labelledby={"tabs-tab" + month}>
                            <div className="flex items-center py-3 px-4">
                                <span className="text-xl font-medium">
                                    {items[month]?.filter(Boolean).reduce((total, item) => (
                                        Array.isArray(item) || typeof item === 'object' ? total + Object.keys(item).length : total
                                    ), 0)} смени за {months[month]}
                                </span>
                            </div>

                            {items[month]?.map((shiftDay, i) => (
                                shiftDay && shiftDay.length > 0 ? (
                                    <div className="flex items-center space-x-2 py-1" key={i}>
                                        <div className="font-bold flex-shrink-0 w-6 text-right">{i + ":"}</div> {/*This is the column for the date. I've given it a fixed width (w-8) which you can adjust*/}
                                        <div className="flex-grow flex">
                                            {shiftDay.map(assignment => (
                                                <div className="flow space-x-2 bg-gray-200 rounded-lg shadow-md py-2 px-3" key={assignment.id}>
                                                    <span>{GetTimeFormat(assignment.start)} - {GetTimeFormat(assignment.end)}</span>
                                                    <button
                                                        className={`text-sm text-white font-semibold px-2 rounded-lg shadow ${assignment.isConfirmed ? "bg-yellow-400 hover:bg-yellow-500" : "bg-red-400 hover:bg-red-500"}`}
                                                        onClick={() => searchReplacement(assignment.id)}
                                                    >
                                                        Търси заместник
                                                    </button>
                                                    <button
                                                        className="text-sm bg-green-400 hover:bg-green-500 text-white font-semibold px-2 rounded-lg shadow"
                                                        onClick={() => AddToGoogleCalendar(assignment.id)}
                                                    >
                                                        Добави в календар
                                                    </button>
                                                </div>
                                            ))}
                                        </div>
                                    </div>) : null
                            ))}
                        </div>


                        : null
                ))}
            </div>
        </div >
    );
}


export default ShiftsList;