import React from 'react';
import garbageBin from "../../../assets/images/garbage.svg";
import garbageBinWhite from "../../../assets/images/garbage-white.svg";
import {Link} from "react-router-dom";
import {Microservice, Role} from "../../../models/EgovUser";
import useTranslations from "../../../hooks/useTranslations";

type QuickAccessBoxProps = {
    role: Role,
    service: string
    application: Microservice
    permission?: string
    hasDeleted: boolean
    setHasDeleted: (e: any) => void
    onDelete: () => void
    onCancelDelete: () => void
}


const QuickAccessBox = ({
                            role,
                            application,
                            service,
                            permission,
                            hasDeleted,
                            onDelete,
                            onCancelDelete,
                            setHasDeleted
                        }: QuickAccessBoxProps) => {

    const {translateModule, translateMicroservice, translateRole, translatePermission} = useTranslations()

    if (hasDeleted) {
        return (
            <div className="qa-block-container">
                <div className="to-be-deleted">
                    <div className="qa-block-left-deleted">
                        <a className="garbage-bin-deleted"><img src={garbageBinWhite}
                                                                alt="garbage bin icon"/></a>
                        <div className="qa-block-text-container-deleted col-12">
                            <span className="delete-msg">Να το αφαιρέσω;</span>
                        </div>
                    </div>
                    <div className="qa-block-right-deleted d-flex">
                        <button onClick={() => {
                            onDelete()
                        }}>Ναι
                        </button>
                        <button onClick={() => {
                            onCancelDelete()
                        }}>Όχι
                        </button>
                    </div>
                </div>
            </div>
        )
    } else {

        return (
            <Link className="qa-block-link"
                  to={{pathname: `/applications/${application}/services/${service}${permission ? '/'+permission : ''}`, search: `?activeRole=${role}`}}>
                <div className="qa-block-container">
                    <div className="normal">
                        <div className="qa-block-left">

                            <div className="qa-block-text-container">
                                <p className="qa-role">{translateRole(role)}</p>
                                {/*// @ts-ignore*/}
                                <p className="qa-title">{
                                    permission ?
                                        translatePermission(application + '.' + service + '.' + permission)
                                        :
                                        translateModule(application.concat('.', service))

                                }
                                    ({translateMicroservice(application)})
                                </p>
                            </div>
                            <span className="garbage-bin" onClick={(e) => setHasDeleted(e)}><img src={garbageBin}
                                                                                                 alt="garbage bin icon"/></span>
                        </div>
                    </div>
                </div>
            </Link>

        )
    }
}

function areEqual(prevProps: QuickAccessBoxProps, nextProps: QuickAccessBoxProps) {
    /*
    return true if passing nextProps to render would return
    the same result as passing prevProps to render,
    otherwise return false
    */
    return false
    return (prevProps.hasDeleted === nextProps.hasDeleted);
}

export default React.memo(QuickAccessBox, areEqual);