import "./RenderTemplates.scss";
import CustomFormSection from "../Forms/CustomFormSection/CustomFormSection";
import CustomLabel from "../Forms/CustomLabel/CustomLabel";
import CustomTextArea from "../Forms/CustomTextArea/CustomTextArea";
import React, {useState} from "react";
import InputFake from "../Typography/InputFake";
import FormButtonSave from "../Forms/FormButton/FormButtonSave";
type RenderTemplateParams = {
    data: any;
    templateName: string | null |undefined;
};

export const renderTemplate = ({ data, templateName }: RenderTemplateParams) => {
    if (!data && templateName !=='sxolia') return <p>Δεν υπάρχουν διαθέσιμα δεδομένα.</p>;

    switch (templateName) {
        case "tropopoiiseisSimvasis": {
            const rowSizes = [2, 2, 2, 1, 2];

            const AccordionBlock = ({
                                        title,
                                        entriesObject,
                                        number,
                                    }: {
                title: string;
                entriesObject: any;
                number?: number;
            }) => {
                const [isOpen, setIsOpen] = useState(false);

                const entries = Object.entries(entriesObject)
                    .filter(([key]) => key !== "date")
                    .map(([key, value]) => ({ id: key, value }));

                let start = 0;
                const groupedRows = rowSizes.map((size) => {
                    const group = entries.slice(start, start + size);
                    start += size;
                    return group;
                });

                return (
                    <div className="tropopoiisi accordion-block">
                        <div
                            className="mod-header accordion-header"
                            onClick={() => setIsOpen(!isOpen)}
                            style={{ cursor: "pointer", userSelect: "none" }}
                            aria-expanded={isOpen}
                        >
                            {number !== undefined && <span className="mod-number">{number}.</span>}
                            <span className="mod-date">{title}</span>
                            <span className="accordion-icon" style={{ marginLeft: "auto" }}>
            {isOpen ? "▲" : "▼"}
          </span>
                        </div>
                        {isOpen && (
                            <div className="accordion-content">
                                {groupedRows.map((row, rowIndex) => {
                                    const boxClass = `data-box ${row.length === 2 ? "two-items" : "one-item"}`;

                                    return (
                                        <div key={rowIndex} className={boxClass}>
                                            {row.map((item) => (
                                                <div key={item.id} className="data-item">
                                                    <p>
                                                        <b>{item.id}:</b> <span className="value">{String(item.value)}</span>
                                                    </p>
                                                </div>
                                            ))}
                                        </div>
                                    );
                                })}
                            </div>
                        )}
                    </div>
                );
            };

            return (
                <div className="tropopoiiseis-template">
                    <div className="original-contract">
                        {Array.isArray(data?.originalContract) && data.originalContract.length > 0 ? (
                            data.originalContract.map((entry: any, idx: number) => (
                                <AccordionBlock
                                    key={"original-" + idx}
                                    title={`Αρχική Σύμβαση ${entry.date || ""}`}
                                    entriesObject={entry}
                                    // no number here for original contract
                                />
                            ))
                        ) : (
                            <p>Δεν υπάρχουν αρχικά δεδομένα σύμβασης</p>
                        )}
                    </div>

                    <div className="modifications-scroll">
                        {Array.isArray(data?.modifications) && data.modifications.length > 0 ? (
                            data.modifications.map((entry: any, idx: number) => (
                                <AccordionBlock
                                    key={"mod-" + (idx + 2)}
                                    number={idx + 2}
                                    title={`Τροποποίηση ${entry.date || ""}`}
                                    entriesObject={entry}
                                />
                            ))
                        ) : (
                            <p>Δεν υπάρχουν τροποποιήσεις</p>
                        )}
                    </div>
                </div>
            );
        }
        case "stoixeiaSimvasis":
            return (
                <div className="contract-details-template">
                    <div className="data-box one-item">
                        <div className="data-item">
                            <p>
                                <b>{data.contract_object?.id || "—"}</b>
                                <span className="value">{data.contract_object?.name || "—"}</span>
                            </p>
                        </div>
                    </div>

                    {Array.isArray(data.work_packages) && data.work_packages.length > 0 ? (
                        data.work_packages.map((item: any) => (
                            <div key={item.id} className="data-box one-item">
                                <div className="data-item">
                                    <p>
                                        <b>{item.id}:</b>
                                        <span className="value">{item.value || item.name || JSON.stringify(item)}</span>
                                    </p>
                                </div>
                            </div>
                        ))
                    ) : (
                        <div className="data-box one-item">
                            <div className="data-item">
                                <p>Δεν υπάρχουν work packages</p>
                            </div>
                        </div>
                    )}
                </div>
            );

        case "oikonomikaStoixeia":
            if (!Array.isArray(data)) return null;

            const groupedItems = [];
            for (let i = 0; i < data.length; i += 2) {
                groupedItems.push(data.slice(i, i + 2));
            }

            return (
                <div className="oikonomika-boxes-template">
                    {groupedItems.map((group, idx) => {
                        const boxClass = group.length === 2 ? "data-box two-items" : "data-box one-item";

                        return (
                            <div key={idx} className={boxClass}>
                                {group.map((item: any) => (
                                    <div key={item.id} className="data-item">
                                        <p>
                                            <b>{item.id}:</b>
                                            <span className="value">{item.value || item.name || JSON.stringify(item)}</span>
                                        </p>
                                    </div>
                                ))}
                            </div>
                        );
                    })}
                </div>
            );

        case "sxolia":
        type Comment = {
            id: string;
            name: string;
            date: string;
        };
        type Props = {
            data?: {
                sxolia: Comment[];
            };
        };
            return (
                <div className="sxolia-template">
                    <CustomFormSection theme={"default"}>
                        <div className="row">
                            <div className={'col-12'}>
                                <CustomLabel>ΠΡΟΣΘΕΣΤΕ ΣΧΟΛΙΟ</CustomLabel>
                                <CustomTextArea
                                    onChange={(e) => {
                                       console.log(e);
                                    }}/>
                            </div>
                            <div className={'col-12 d-flex justify-content-end'}>
                               <FormButtonSave>
                                   προσθεστε
                               </FormButtonSave>
                            </div>
                        </div>
                    </CustomFormSection>
                    <div className="comments-container" >
                    {data?.sxolia?.map((comment: Comment, index: number) => (
                        <CustomFormSection key={index} theme={"blue"}>
                            <CustomLabel secondaryLabel={comment.date}>
                                {comment.id}
                            </CustomLabel>
                            <InputFake hasCopy={false}>
                                {comment.name}
                            </InputFake>
                        </CustomFormSection>
                    ))}
                    </div>
                </div>
            );

        default:
            return <pre>{JSON.stringify(data, null, 2)}</pre>;
    }

};