import React, {ReactNode, useState} from 'react';
import CustomToggler from "../../UI/CustomToggler/CustomToggler";
import Close from "../../SVG/Close";
import open from "../../../assets/images/down-arrow.svg";
import push from "../../../assets/images/eidopoiseis-push.svg";
import email from "../../../assets/images/email.svg";
// import sms from "../../../assets/images/sms.svg";
import notify from '../../../assets/images/notify.svg';
import {Microservice} from "../../../models/EgovUser";
import useTranslations from "../../../hooks/useTranslations";
import {MicroserviceNotificationSettings} from "../../../models/EgovNotifications";

type MsNotificationsBoxProps = {
    children?: ReactNode
    ms: Microservice
    settings: MicroserviceNotificationSettings
    toggleSetting: any
}

const MsNotificationsBox = ({ms, settings, toggleSetting}: MsNotificationsBoxProps) => {


    const [isOpen, setIsOpen] = useState(false)
    const {
        translateMicroserviceIcon,
    } = useTranslations()

    const enabledCount = Object.values(settings).filter(v=>v).length





    return (
        <div className={`notifications-ms-box ${isOpen ? 'open' : 'closed'}`}>

            <div className="notifications-ms-box--head d-flex flex-wrap">
                <img src={translateMicroserviceIcon(ms) ?? undefined} alt="" height={30}/>
                <div className='group-toggler'>
                    <span>Όλες οι ρυθμίσεις</span>
                    <CustomToggler
                        smol
                        onChange={() => toggleSetting({
                            type: 'ms',
                            ms: ms,
                            notification: 'all',
                            value: enabledCount > 0 ? false : true
                        })}
                        checked={enabledCount > 0}/>
                    <span>{enabledCount}/3</span>
                </div>


                {isOpen ? (
                    <div onClick={()=>setIsOpen(false)} className={'group-toggler--icon'}>
                        <Close />
                    </div>

                ) : (
                    <img src={open} alt="open-btn" onClick={()=>setIsOpen(true)} width='14' height={'8'} className={'group-toggler--icon'}/>
                )}

            </div>

            <div className="notifications-ms-box--body">
                <div className="notification-type">
                    <div className={'icon'}>
                        <img src={push} alt=""/>
                    </div>

                    <p>Ειδοποίησεις browser</p>
                    <CustomToggler
                        smol
                        onChange={() => toggleSetting({
                            type: 'ms',
                            ms: ms,
                            notification: 'beams',
                            value: !settings.beams

                        })}
                        checked={settings.beams}/>
                </div>

                <div className="notification-type">
                    <div className={'icon'}>
                        <img src={email} alt=""/>
                    </div>
                    <p>Email</p>
                    <CustomToggler
                        smol
                        onChange={() => toggleSetting({
                            type: 'ms',
                            ms: ms,
                            notification: 'email',
                            value: !settings.email

                        })}
                        checked={settings.email}/>
                </div>

                {/*<div className="notification-type">*/}
                {/*    <div className={'icon'}>*/}
                {/*        <img src={sms} alt=""/>*/}
                {/*    </div>*/}
                {/*    <p>SMS</p>*/}
                {/*    <CustomToggler*/}
                {/*        smol*/}
                {/*        onChange={() => toggleSetting({*/}
                {/*            type: 'ms',*/}
                {/*            ms: ms,*/}
                {/*            notification: 'sms',*/}
                {/*            value: !settings.sms*/}

                {/*        })}*/}
                {/*        checked={settings.sms}/>*/}
                {/*</div>*/}

                <div className="notification-type">
                    <div className={'icon'}>
                        <img src={notify} alt=""/>
                    </div>
                    <p>D.U.A. Ειδοποιήσεις</p>
                    <CustomToggler
                        smol
                        onChange={() => toggleSetting({
                            type: 'ms',
                            ms: ms,
                            notification: 'channel',
                            value: !settings.channel

                        })}
                        checked={settings.channel}/>
                </div>
            </div>
        </div>
    );
}

export default MsNotificationsBox;