import {useTranslation} from "react-i18next";

const ProtectionSelector = ({
                                shield = true,
                                mandatoryProtection = 0, setMandatoryProtection = () => {
    }
                            }) => {
    const {t} = useTranslation();
    const toggle = (bit) => {
        bit = 1 << (bit - 1);
        setMandatoryProtection(v => (v & bit ? v & ~bit : v | bit));
    };

    const props = {
        style: ({cursor: "pointer"}),
    };

    const propsDash = {
        style: ({cursor: "pointer"}),
        opacity: "0.8",
        stroke: "#7b8285",
        strokeDasharray: "4 3",
        strokeWidth: "1"
    };

    const isOn = (bit) => (mandatoryProtection & (1 << (bit - 1))) !== 0;
    const color = (bit) => (isOn(bit) ? "#4ade80" : "#e5e7eb");

    /*
    1 - 1 - Casque
    2 - 2 - Gorgerin
    3 - 4 - Coquille et Protection pelvienne
    4 - 8 - Gant main(s) armée(s)
    5 - 16 - Gant main bouclier
    6 - 32 - Plastron
    7 - 64 - Protection de bras armé(s)
    8 - 128 - Protection de bras de bouclier
    9 - 256 - Protection de jambes
    10 - 512 - Protection de genoux
    11 - 1024 - Protection de coudes
    12 - 2048 - Protection dorsale
    13 - 4096 - Protection de pieds
    */
    return (
        <svg width="200" height="300" viewBox="0 0 160 320">
            <rect
                width="160" height="320"
                fill="#f9fafb00"
                stroke="#d1d5db"
                strokeWidth="2"
                rx="10"
            />

            {/* Casque */}
            <ellipse {...props}
                     cx="80" cy="35" rx="20" ry="22"
                     fill={color(1)}
                     onClick={() => toggle(1)}
            ><title>{t('casque')}</title></ellipse>

            {/* Gorgerin */}
            <ellipse {...props}
                     cx="80" cy="65" rx="12" ry="8"
                     fill={color(2)}
                     onClick={() => toggle(2)}
            ><title>{t('gorgerin')}</title></ellipse>

            {/* Plastron */}
            <ellipse {...props}
                     cx="80" cy="118" rx="30" ry="45"
                     fill={color(6)}
                     onClick={() => toggle(6)}
            ><title>{t('plastron')}</title></ellipse>

            {/* Protection dorsale */}
            <ellipse {...propsDash}
                     cx="80" cy="118" rx="10" ry="35"
                     fill={color(12)}
                     onClick={() => toggle(12)}
            ><title>{t('protectionDorsale')}</title></ellipse>

            {/* Protection de bras armé(s) */}
            <ellipse {...props}
                     cx="38" cy="118" rx="12" ry="40"
                     fill={color(7)}
                     onClick={() => toggle(7)}
            ><title>{shield ? t('protectionDeBrasArmé') : t('protectionDeBras')}</title></ellipse>
            {/* Protection de bras de bouclier */}
            <ellipse {...props}
                     cx="122" cy="118" rx="12" ry="40"
                     fill={color(shield ? 8 : 7)}
                     onClick={() => toggle(shield ? 8 : 7)}
            ><title>{shield ? t('protectionDeBrasDeBouclier') : t('protectionDeBras')}</title></ellipse>

            {/* Protection de coudes */}
            <ellipse {...propsDash}
                     cx="38" cy="118" rx="12" ry="12"
                     fill={color(11)}
                     onClick={() => toggle(11)}
            ><title>{t('protectionDeCoudes')}</title></ellipse>
            <ellipse {...propsDash}
                     cx="122" cy="118" rx="12" ry="12"
                     fill={color(11)}
                     onClick={() => toggle(11)}
            ><title>{t('protectionDeCoudes')}</title></ellipse>

            {/* Gant main(s) armée(s) */}
            <ellipse {...props}
                     cx="38" cy="170" rx="10" ry="12"
                     fill={color(4)}
                     onClick={() => toggle(4)}
            ><title>{shield ? t('gantMainsArmées') : t('gants')}</title></ellipse>
            {/* Gant main bouclier */}
            <ellipse {...props}
                     cx="122" cy="170" rx="10" ry="12"
                     fill={color(shield ? 5 : 4)}
                     onClick={() => toggle(shield ? 5 : 4)}
            ><title>{shield ? t('gantMainBouclier') : t('gants')} </title></ellipse>

            {/* Protection de jambes */}
            <ellipse {...props}
                     cx="65" cy="230" rx="14" ry="55"
                     fill={color(9)}
                     onClick={() => toggle(9)}
            ><title>{t('protectionDeJambes')}</title></ellipse>
            <ellipse {...props}
                     cx="95" cy="230" rx="14" ry="55"
                     fill={color(9)}
                     onClick={() => toggle(9)}
            ><title>{t('protectionDeJambes')}</title></ellipse>

            {/* Protection de genoux */}
            <ellipse {...propsDash}
                     cx="65" cy="230" rx="14" ry="14"
                     fill={color(10)}
                     onClick={() => toggle(10)}
            ><title>{t('protectionDeGenoux')}</title></ellipse>
            <ellipse {...propsDash}
                     cx="95" cy="230" rx="14" ry="14"
                     fill={color(10)}
                     onClick={() => toggle(10)}
            ><title>{t('protectionDeGenoux')}</title></ellipse>

            {/* Coquille et Protection pelvienne */}
            <ellipse {...props}
                     cx="80" cy="170" rx="20" ry="10"
                     fill={color(3)}
                     onClick={() => toggle(3)}
            ><title>{t('coquilleProtectionPelvienne')}</title></ellipse>

            {/* Protection de pieds */}
            <ellipse {...props}
                     cx="65" cy="295" rx="16" ry="8"
                     fill={color(13)}
                     onClick={() => toggle(13)}
            ><title>{t('protectionDePieds')}</title></ellipse>
            <ellipse {...props}
                     cx="95" cy="295" rx="16" ry="8"
                     fill={color(13)}
                     onClick={() => toggle(13)}
            ><title>{t('protectionDePieds')}</title></ellipse>
        </svg>
    );
}

export default ProtectionSelector;


export function getMandatoryProtectionsList(mandatoryProtection, shield, t) {
    const protections = [];
    const isOn = (bit) => (mandatoryProtection & (1 << (bit - 1))) !== 0;

    if (isOn(1)) protections.push(t('casque', {ns: "common"}));
    if (isOn(2)) protections.push(t('gorgerin', {ns: "common"}));
    if (isOn(3)) protections.push(t('coquilleProtectionPelvienne', {ns: "common"}));
    if (isOn(4) && !shield) protections.push(t('gants', {ns: "common"}));
    if (isOn(4) && shield) protections.push(t('gantMainsArmées', {ns: "common"}));
    if (isOn(5) && shield) protections.push(t('gantMainBouclier', {ns: "common"}));
    if (isOn(6)) protections.push(t('plastron', {ns: "common"}));
    if (isOn(7) && !shield) protections.push(t('protectionDeBras', {ns: "common"}));
    if (isOn(7) && shield) protections.push(t('protectionDeBrasArmé', {ns: "common"}));
    if (isOn(8) && shield) protections.push(t('protectionDeBrasDeBouclier', {ns: "common"}));
    if (isOn(9)) protections.push(t('protectionDeJambes', {ns: "common"}));
    if (isOn(10)) protections.push(t('protectionDeGenoux', {ns: "common"}));
    if (isOn(11)) protections.push(t('protectionDeCoudes', {ns: "common"}));
    if (isOn(12)) protections.push(t('protectionDorsale', {ns: "common"}));
    if (isOn(13)) protections.push(t('protectionDePieds', {ns: "common"}));

    return protections;
}
