turnosxpress/txclient/src/app/components/OrganizationHeader/OrganizationHeader.tsx

"use client";
import React, { useEffect, useState } from "react";
import style from "./orgheader.module.css";
import { MyOranizationsView } from "@core/Models/Company.model";
import IconButton from "@mui/material/IconButton";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import ResizeIcon from "@mui/icons-material/AspectRatio";
import PaletteIcon from "@mui/icons-material/Palette";
import { useMenuStore } from "@core/Store/Menu.Store";
import {
    ORGANIZATION_HEADER_MODES,
    useOrganizationHeaderStore,
} from "@store/OrganizationHeader.Store";
import SettingsIcon from "@mui/icons-material/Settings";
import NotificationsIcon from "@mui/icons-material/Notifications";
import classNames from "classnames";
import { useNavigation } from "@core/app/hooks/goto";

import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
import Dialog from "@mui/material/Dialog";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import CloseIcon from "@mui/icons-material/Close";
import { getSlug } from "@core/app/helpers/Slug";
import {
    FacebookShareButton,
    WhatsappShareButton,
    TwitterShareButton,
    EmailShareButton,
    TelegramShareButton,
    FacebookIcon,
    WhatsappIcon as WhatsAppShareIcon,
    TwitterIcon,
    EmailIcon,
    TelegramIcon
} from "react-share";

export interface OrganizationHeaderParams {
    data: MyOranizationsView;
}

export default function OrganizationHeader(props: OrganizationHeaderParams): React.ReactElement {
    const menu = useMenuStore();
    const organizationHeader = useOrganizationHeaderStore();
    const { goTo } = useNavigation();
    const [headerColor, setHeaderColor] = useState(props.data.headerColor);
    const [headerFontColor, setHeaderFontColor] = useState(props.data.headerFontColor);
    const [headerFontShadowColor, setHeaderFontShadowColor] = useState(
        props.data.headerFontShadowColor
    );
    const [showSharePopup, setShowSharePopup] = useState(false);

    useEffect(() => {
        menu.clear();

        menu.add({
            text: "Perzonalizar",
            onClick: () => {
                goTo("/admin/org/profile/" + props.data.id + "/customize");
            },
            icon: <PaletteIcon />,
        });

        menu.add({
            text: "Compartir",
            onClick: () => {
                setShowSharePopup(true);
            },
            icon: <ShareOutlinedIcon />,
        });

        menu.add({
            text: "Ver perfil",
            onClick: () => {
                goTo(`/landing/org/${props.data.id}`);
            },
            icon: <OpenInNewIcon />,
        });

        menu.add({
            text: "Notificaciones",
            onClick: () => {
                goTo("/admin/org/profile/" + props.data.id + "/notifications");
            },
            icon: <NotificationsIcon />,
        });

        menu.divider();

        menu.add({
            text: "Configuración Avanzada",
            onClick: () => {
                goTo("/admin/org/profile/" + props.data.id + "/advanced");
            },
            icon: <SettingsIcon />,
        });
    }, []);

    useEffect(() => {
        setHeaderColor(organizationHeader.headerColor);
        setHeaderFontColor(organizationHeader.headerFontColor);
        setHeaderFontShadowColor(organizationHeader.headerFontShadowColor);
    }, [
        organizationHeader.headerColor,
        organizationHeader.headerFontColor,
        organizationHeader.headerFontShadowColor,
    ]);

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

        classList.push(style.organizationHeader);

        if (organizationHeader.state === ORGANIZATION_HEADER_MODES.LARGE) {
            classList.push(style.organizationHeaderLarge);
        } else if (organizationHeader.state === ORGANIZATION_HEADER_MODES.SMALL) {
            classList.push(style.organizationHeaderSmall);
        }

        return classNames(classList);
    };

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

        if (organizationHeader.state === ORGANIZATION_HEADER_MODES.LARGE) {
            classList.push(style.buttonTogleSizeLarge);
        } else if (organizationHeader.state === ORGANIZATION_HEADER_MODES.SMALL) {
            classList.push(style.buttonTogleSizeSmall);
        }

        return classNames(classList);
    };

    return (
        <>
            <div
                className={getClassNames()}
                style={{
                    backgroundColor: headerColor || 'transparent',
                    ...(props.data.headerFile ? { backgroundImage: `url(${props.data.headerFile})` } : {}),
                }}
            >
                <div>
                    <h1
                        style={{
                            color: headerFontColor,
                            textShadow: `1px 1px 2px ${headerFontShadowColor}`,
                            textTransform: "capitalize",
                        }}
                    >
                        {props.data.name}
                    </h1>
                    <span
                        style={{
                            color: headerFontColor,
                            textShadow: `2px 2px 2px ${headerFontShadowColor}`,
                        }}
                    >
                        {props.data.description}
                    </span>
                </div>
                <div>&nbsp;</div>
            </div>
            <div className={style.buttonMenu}>
                <IconButton
                    aria-label="more"
                    id="button-menu"
                    aria-controls={menu.visible ? "tx-menu" : undefined}
                    aria-expanded={menu.visible ? "true" : undefined}
                    aria-haspopup="true"
                    onClick={() => {
                        menu.setAnchorEl(document.getElementById("button-menu")!);
                        menu.show();
                    }}
                    sx={{
                        color: headerFontColor,
                        textShadow: `1px 1px 2px ${headerFontShadowColor}`,
                        opacity: 0.8,
                    }}
                >
                    <MoreVertIcon />
                </IconButton>
            </div>
            <div className={getToggleClassNames()}>
                <IconButton
                    aria-label="more"
                    id="button-menu"
                    aria-controls={menu.visible ? "tx-menu" : undefined}
                    aria-expanded={menu.visible ? "true" : undefined}
                    aria-haspopup="true"
                    onClick={() => {
                        organizationHeader.toggleState();
                    }}
                    sx={{
                        color: headerFontColor,
                        textShadow: `1px 1px 2px ${headerFontShadowColor}`,
                        opacity: 0.8,
                    }}
                >
                    <ResizeIcon />
                </IconButton>
            </div>

            <Dialog open={showSharePopup} onClose={() => setShowSharePopup(false)} maxWidth="sm" fullWidth>
                <DialogTitle sx={{ m: 0, p: 2, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <span style={{ fontWeight: "bold" }}>Compartir Organización</span>
                    <IconButton
                        aria-label="close"
                        onClick={() => setShowSharePopup(false)}
                        sx={{ color: (theme) => theme.palette.grey[500] }}
                    >
                        <CloseIcon />
                    </IconButton>
                </DialogTitle>
                <DialogContent dividers>
                    <div style={{ textAlign: "center", marginBottom: "30px", fontSize: "16px", color: "var(--black-light)" }}>
                        Compartí el perfil de <strong>{props.data.name}</strong> para que tus clientes puedan sacar turnos fácilmente.
                    </div>
                    <div style={{ display: "flex", justifyContent: "center", flexDirection: "row", alignItems: "center", gap: "20px", paddingBottom: "20px" }}>
                        <WhatsappShareButton title={"Reserva tu turno en " + props.data.name} separator=":: " url={window.location.origin + "/" + getSlug(props.data.name)}>
                            <WhatsAppShareIcon size={54} round />
                        </WhatsappShareButton>
                        <FacebookShareButton title={"Reserva tu turno en " + props.data.name} url={window.location.origin + "/" + getSlug(props.data.name)}>
                            <FacebookIcon size={54} round />
                        </FacebookShareButton>
                        <EmailShareButton title={"Reserva tu turno en " + props.data.name} separator=":: " url={window.location.origin + "/" + getSlug(props.data.name)}>
                            <EmailIcon size={54} round />
                        </EmailShareButton>
                        <TelegramShareButton title={"Reserva tu turno en " + props.data.name} url={window.location.origin + "/" + getSlug(props.data.name)}>
                            <TelegramIcon size={54} round />
                        </TelegramShareButton>
                        <TwitterShareButton title={"Reserva tu turno en " + props.data.name} url={window.location.origin + "/" + getSlug(props.data.name)}>
                            <TwitterIcon size={54} round />
                        </TwitterShareButton>
                    </div>
                </DialogContent>
            </Dialog>
        </>
    );
}