"use client";
import { CollaboratorServiceItems } from "@models/Collaborators.model";
import style from "./SelectableServiceItem.module.css";
import { formatPrice } from "@helpers/Numbers";
import { useState } from "react";
import classNames from "classnames";
import ServiceRatingSummary from "@components/ServiceRatingSummary/ServiceRatingSummary";

export interface SelectableServiceItemProps {
    data: CollaboratorServiceItems;
    onChange?: (serviceId: string, active: boolean) => void;
}

export default function SelectableServiceItem(
    props: SelectableServiceItemProps
): React.ReactElement {
    const [active, setActive] = useState(props.data.active);

    const getClassesNames = () => {
        const classList: classNames.ArgumentArray = [];

        classList.push(style.selectableServiceItem);

        if (active) {
            classList.push(style.selectableServiceItemActive);
        } else {
            classList.push(style.selectableServiceItemInactive);
        }
        return classNames(classList);
    };

    const handleClick = () => {
        setActive(!active);
        if (!props.onChange) {
            return;
        }
        props.onChange(props.data.id, !active);
    };

    return (
        <>
            <div className={getClassesNames()} onClick={handleClick}>
                <div className={style.serviceHeader}>
                    <h1>{props.data.name}</h1>
                    <ServiceRatingSummary serviceId={props.data.id} variant="row" showOpinionCount={false} />
                </div>
                <p>{props.data.description}</p>
                <span>{formatPrice(props.data.price)}</span>
            </div>
        </>
    );
}