import React, { useContext } from 'react';
import { SettingsContext } from '../App/SettingsContext';
import ecreIcons from '../../components/core/icons';
import { translate } from '../../Helper';

function Sidebar() {
    const {
        isCollapsed,handleCollapse,activeTab,handleActiveTab,isVisible
    } = useContext(SettingsContext);

    return (
        <div className={`echo-rewards-settings__sidebar ${isCollapsed ? 'ecre-w-[84px] ecre-px-4' : 'ecre-w-[84px] md:ecre-w-[313px] ecre-px-2 md:ecre-px-6'} ecre-py-4 ecre-bg-white ecre-min-h-[750px] ecre-transition`}>
            <div className="ecre-sticky ecre-top-[50px] ecre-pb-[30px]">
                <div className={`ecre-entry-header ecre-flex ecre-items-center ${isCollapsed ? 'ecre-justify-center' : 'ecre-justify-between'}  ecre-mb-5 lg:ecre-mb-10`}>
                    {isCollapsed ? '' : (
                        <div onClick={() => handleActiveTab('referral_settings')} className="brand-logo ecre-w-full ecre-flex ecre-flex-col md:ecre-flex-row ecre-items-center md:ecre-items-end ecre-gap-1 md:ecre-gap-2 ecre-cursor-pointer">
                            <div className="logo" >
                                {ecreIcons.echoRewards}
                            </div>
                            <div className="logo-title ecre-text-gray-800 ecre-text-[10px] md:ecre-text-xl ecre-font-medium">{translate('EchoRewards')}</div>
                        </div>
                    )}

                    <div className="hamburger-menu ecre-hidden md:ecre-block">
                        <button onClick={handleCollapse} className="ecre-p-1 ecre-bg-transparent ecre-border-none ecre-outline-none ecre-cursor-pointer">
                            {isCollapsed ? (
                                ecreIcons.collapsed
                            ) : (
                                ecreIcons.notCollapsed
                            )}
                        </button>
                    </div>
                </div>
                <div className="echo-rewards-settings__navbar">
                    <ul className="echo-rewards-settings__navbar-menu">
                        <li className={`ecre-mb-2 ${activeTab === 'referral_settings' ? 'active' : ''}`}>
                            <a onClick={() => handleActiveTab('referral_settings')} className={`ecre-flex-col md:ecre-flex-row ecre-items-center md:ecre-gap-2 ${isCollapsed ? 'ecre-px-[15px] ecre-inline-flex' : 'ecre-flex ecre-px-[8px] md:ecre-pl-2.5 md:ecre-pr-4'} ecre-py-[8px] md:ecre-py-[15px] ecre-cursor-pointer ecre-transition ecre-rounded`}>
                                <div className="icon-wrapper ecre-h-6 ecre-w-6 ecre-flex ecre-items-center ecre-justify-center">
                                   {ecreIcons.referral}
                                </div>
                                {isCollapsed ? '' : (
                                    <div className={`ecre-text ecre-flex ecre-justify-between ecre-items-center ecre-grow ecre-transition-opacity ecre-duration-300 ${isVisible ? 'ecre-opacity-100 ecre-visible' : 'ecre-opacity-0 ecre-invisible'}`}>
                                        <span className="title ecre-text-gray-900 ecre-text-[9px] ecre-leading-3 md:ecre-text-sm ecre-font-normal ecre-transition md:ecre-whitespace-nowrap ecre-text-center md:ecre-text-left ecre-mt-[2px]">{translate('referral_settings_title')}</span>

                                        <div className="icon-angle-right ecre-invisible ecre-opacity-0 ecre-transition ecre-hidden md:ecre-inline-block">
                                           {ecreIcons.rightArrow}
                                        </div>
                                    </div>
                                )}
                            </a>
                        </li>
                        <li className={`ecre-mb-2 ${activeTab === 'reward_settings' ? 'active' : ''}`}>
                            <a onClick={() => handleActiveTab('reward_settings')} className={`ecre-flex-col md:ecre-flex-row ecre-items-center md:ecre-gap-2 ${isCollapsed ? 'ecre-px-[15px] ecre-inline-flex' : 'ecre-flex ecre-px-[8px] md:ecre-pl-2.5 md:ecre-pr-4'} ecre-py-[8px] md:ecre-py-[15px] ecre-cursor-pointer ecre-transition ecre-rounded`}>
                                <div className="icon-wrapper ecre-h-6 ecre-w-6 ecre-flex ecre-items-center ecre-justify-center">
                                    {ecreIcons.rewards}
                                </div>
                                {isCollapsed ? '' : (
                                    <div className={`ecre-text ecre-flex ecre-justify-between ecre-items-center ecre-grow ecre-transition-opacity ecre-duration-300 ${isVisible ? 'ecre-opacity-100 ecre-visible' : 'ecre-opacity-0 ecre-invisible'}`}>
                                        <span className="title ecre-text-gray-900 ecre-text-[9px] ecre-leading-3 md:ecre-text-sm ecre-font-normal ecre-transition md:ecre-whitespace-nowrap ecre-text-center md:ecre-text-left ecre-mt-[2px]">{translate('reward_settings')}</span>

                                        <div className="icon-angle-right ecre-invisible ecre-opacity-0 ecre-transition ecre-hidden md:ecre-inline-block">
                                            {ecreIcons.rightArrow}
                                        </div>
                                    </div>
                                )}
                            </a>
                        </li>
                        <li className={`ecre-mb-2 ${activeTab === 'reward_management' ? 'active' : ''}`}>
                            <a onClick={() => handleActiveTab('reward_management')} className={`ecre-flex-col md:ecre-flex-row ecre-items-center md:ecre-gap-2 ${isCollapsed ? 'ecre-px-[15px] ecre-inline-flex' : 'ecre-flex ecre-px-[8px] md:ecre-pl-2.5 md:ecre-pr-4'} ecre-py-[8px] md:ecre-py-[15px] ecre-cursor-pointer ecre-transition ecre-rounded`}>
                                <div className="icon-wrapper ecre-h-6 ecre-w-6 ecre-flex ecre-items-center ecre-justify-center">
                                    {ecreIcons.rewardsManagement}
                                </div>
                                {isCollapsed ? '' : (
                                    <div className={`ecre-text ecre-flex ecre-justify-between ecre-items-center ecre-grow ecre-transition-opacity ecre-duration-300 ${isVisible ? 'ecre-opacity-100 ecre-visible' : 'ecre-opacity-0 ecre-invisible'}`}>
                                        <span className="title ecre-text-gray-900 ecre-text-[9px] ecre-leading-3 md:ecre-text-sm ecre-font-normal ecre-transition md:ecre-whitespace-nowrap ecre-text-center md:ecre-text-left ecre-mt-[2px]">{translate('reward_management')}</span>

                                        <div className="icon-angle-right ecre-invisible ecre-opacity-0 ecre-transition ecre-hidden md:ecre-inline-block">
                                            {ecreIcons.rightArrow}
                                        </div>
                                    </div>
                                )}
                            </a>
                        </li>
                        <li className={`ecre-mb-2 ${activeTab === 'email_settings' ? 'active' : ''}`}>
                            <a onClick={() => handleActiveTab('email_settings')} className={`ecre-flex-col md:ecre-flex-row ecre-items-center md:ecre-gap-2 ${isCollapsed ? 'ecre-px-[15px] ecre-inline-flex' : 'ecre-flex ecre-px-[8px] md:ecre-pl-2.5 md:ecre-pr-4'} ecre-py-[8px] md:ecre-py-[15px] ecre-cursor-pointer ecre-transition ecre-rounded`}>
                                <div className="icon-wrapper ecre-h-6 ecre-w-6 ecre-flex ecre-items-center ecre-justify-center">
                                    {ecreIcons.email}
                                </div>
                                {isCollapsed ? '' : (
                                    <div className={`ecre-text ecre-flex ecre-justify-between ecre-items-center ecre-grow ecre-transition-opacity ecre-duration-300 ${isVisible ? 'ecre-opacity-100 ecre-visible' : 'ecre-opacity-0 ecre-invisible'}`}>
                                        <span className="title ecre-text-gray-900 ecre-text-[9px] ecre-leading-3 md:ecre-text-sm ecre-font-normal ecre-transition md:ecre-whitespace-nowrap ecre-text-center md:ecre-text-left ecre-mt-[2px]">{translate('email_settings')}</span>

                                        <div className="icon-angle-right ecre-invisible ecre-opacity-0 ecre-transition ecre-hidden md:ecre-inline-block">
                                            {ecreIcons.rightArrow}
                                        </div>
                                    </div>
                                )}
                            </a>
                        </li>
                        <li className={`ecre-mb-2 ${activeTab === 'shortcodes_widgets' ? 'active' : ''}`}>
                            <a onClick={() => handleActiveTab('shortcodes_widgets')} className={`ecre-flex-col md:ecre-flex-row ecre-items-center md:ecre-gap-2 ${isCollapsed ? 'ecre-px-[15px] ecre-inline-flex' : 'ecre-flex ecre-px-[8px] md:ecre-pl-2.5 md:ecre-pr-4'} ecre-py-[8px] md:ecre-py-[15px] ecre-cursor-pointer ecre-transition ecre-rounded`}>
                                <div className="icon-wrapper ecre-h-6 ecre-w-6 ecre-flex ecre-items-center ecre-justify-center">
                                    {ecreIcons.shortcodes}
                                </div>
                                {isCollapsed ? '' : (
                                    <div className={`ecre-text ecre-flex ecre-justify-between ecre-items-center ecre-grow ecre-transition-opacity ecre-duration-300 ${isVisible ? 'ecre-opacity-100 ecre-visible' : 'ecre-opacity-0 ecre-invisible'}`}>
                                        <span className="title ecre-text-gray-900 ecre-text-[9px] ecre-leading-3 md:ecre-text-sm ecre-font-normal ecre-transition md:ecre-whitespace-nowrap ecre-text-center md:ecre-text-left ecre-mt-[2px]">{translate('shortcodes_widgets')}</span>

                                        <div className="icon-angle-right ecre-invisible ecre-opacity-0 ecre-transition ecre-hidden md:ecre-inline-block">
                                            {ecreIcons.rightArrow}
                                        </div>
                                    </div>
                                )}
                            </a>
                        </li>
                        <li className={`ecre-mb-2 ${activeTab === 'reports_analytics' ? 'active' : ''}`}>
                            <a onClick={() => handleActiveTab('reports_analytics')} className={`ecre-flex-col md:ecre-flex-row ecre-items-center md:ecre-gap-2 ${isCollapsed ? 'ecre-px-[15px] ecre-inline-flex' : 'ecre-flex ecre-px-[8px] md:ecre-pl-2.5 md:ecre-pr-4'} ecre-py-[8px] md:ecre-py-[15px] ecre-cursor-pointer ecre-transition ecre-rounded`}>
                                <div className="icon-wrapper ecre-h-6 ecre-w-6 ecre-flex ecre-items-center ecre-justify-center">
                                  {ecreIcons.reports}
                                </div>

                                {isCollapsed ? '' : (
                                    <div className={`ecre-text ecre-flex ecre-justify-between ecre-items-center ecre-grow ecre-transition-opacity ecre-duration-300 ${isVisible ? 'ecre-opacity-100 ecre-visible' : 'ecre-opacity-0 ecre-invisible'}`}>
                                        <span className="title ecre-text-gray-900 ecre-text-[9px] ecre-leading-3 md:ecre-text-sm ecre-font-normal ecre-transition md:ecre-whitespace-nowrap ecre-text-center md:ecre-text-left ecre-mt-[2px]">{translate('reports_analytics')}</span>

                                        <div className="icon-angle-right ecre-invisible ecre-opacity-0 ecre-transition ecre-hidden md:ecre-inline-block">
                                            {ecreIcons.rightArrow}
                                        </div>
                                    </div>
                                )}
                            </a>
                        </li>
                        <li className={`ecre-mb-2 ${activeTab === 'help_documentation' ? 'active' : ''}`}>
                            <a onClick={() => handleActiveTab('help_documentation')} className={`ecre-flex-col md:ecre-flex-row ecre-items-center md:ecre-gap-2 ${isCollapsed ? 'ecre-px-[15px] ecre-inline-flex' : 'ecre-flex ecre-px-[8px] md:ecre-pl-2.5 md:ecre-pr-4'} ecre-py-[8px] md:ecre-py-[15px] ecre-cursor-pointer ecre-transition ecre-rounded`}>
                                <div className="icon-wrapper ecre-h-6 ecre-w-6 ecre-flex ecre-items-center ecre-justify-center">
                                    {ecreIcons.documments}
                                </div>
                                {isCollapsed ? '' : (
                                    <div className={`ecre-text ecre-flex ecre-justify-between ecre-items-center ecre-grow ecre-transition-opacity ecre-duration-300 ${isVisible ? 'ecre-opacity-100 ecre-visible' : 'ecre-opacity-0 ecre-invisible'}`}>
                                        <span className="title ecre-text-gray-900 ecre-text-[9px] ecre-leading-3 md:ecre-text-sm ecre-font-normal ecre-transition md:ecre-whitespace-nowrap ecre-text-center md:ecre-text-left ecre-mt-[2px]">{translate('help_documentation')}</span>

                                        <div className="icon-angle-right ecre-invisible ecre-opacity-0 ecre-transition ecre-hidden md:ecre-inline-block">
                                            {ecreIcons.rightArrow}
                                        </div>
                                    </div>
                                )}
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    );
}

export default Sidebar;