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

function DocumentationTab() {
    const { isPro } = useContext(SettingsContext);
    const {
        isOpen: isSupportModal,
        toggleSupportPopup: handleToggleSupportModal,
        handleEmailRedirect,
        handleCopy,
        copiedItemIndex,
        error,
        clearError
    } = useSupportPopup();

    return (
        <div className="documentation-settings">
            <Header title={ translate( 'help_documentation' ) } subtitle={ translate( 'help_documentation_desc' ) } />

            <div className="help-documentation ecre-gap-6">
                <div className="help-documentation__item ecre-min-h-[238px] ecre-p-4 ecre-bg-white ecre-rounded ecre-flex ecre-items-start ecre-flex-col">
                    <div className="icon-wrapper ecre-mb-4 ecre-h-[70px] ecre-w-[70px] ecre-flex ecre-items-center ecre-justify-center">
                        {ecreIcons.docummentsOne}
                    </div>
                    
                    <div className="text ecre-mt-auto">
                        <h6 className="ecre-text-black ecre-text-sm ecre-font-medium ecre-mt-0 ecre-mb-1.5"> { translate( 'documentation' ) }</h6>
                        <p className="ecre-text-gray-500 ecre-text-xs ecre-font-normal ecre-mb-5">{ translate( 'docs_info' ) }</p>
                        <a className="ecre-group ecre-cursor-pointer ecre-mt-auto ecre-px-4 ecre-py-2.5 ecre-bg-white ecre-rounded-lg ecre-outline-0 ecre-shadow-none ecre-no-underline ecre-border ecre-border-solid ecre-border-violet-700 ecre-text-violet-700 ecre-text-sm ecre-font-semibold ecre-inline-flex ecre-items-center ecre-gap-3 ecre-transition hover:ecre-bg-violet-700 hover:ecre-text-white" href='https://lnk.wppool.dev/EUY933F' target='__blank'>
                            <span className="">{ translate( 'open_docs' ) }</span>
                            <span className="icon ecre-leading-[1]">
                                {ecreIcons.rightArrowTwo}
                            </span>
                        </a>
                    </div>
                </div>
                {/* Other items remain the same */}
                <div className="help-documentation__item ecre-min-h-[238px] ecre-p-4 ecre-bg-white ecre-rounded ecre-flex ecre-items-start ecre-flex-col">
                    <div className="icon-wrapper ecre-mb-4 ecre-h-[70px] ecre-w-[70px] ecre-flex ecre-items-center ecre-justify-center">
                        {ecreIcons.video}
                    </div>

                    <div className="text ecre-mt-auto">
                        <h6 className="ecre-text-black ecre-text-sm ecre-font-medium ecre-mt-0 ecre-mb-1.5">{ translate( 'video_tutorial' ) }</h6>
                        <p className="ecre-text-gray-500 ecre-text-xs ecre-font-normal ecre-mb-5">{ translate( 'video_tutorial_info' ) }</p>
                        <a className="ecre-group ecre-cursor-pointer ecre-mt-auto ecre-px-4 ecre-py-2.5 ecre-bg-white ecre-rounded-lg ecre-outline-0 ecre-shadow-none ecre-no-underline ecre-border ecre-border-solid ecre-border-violet-700 ecre-text-violet-700 ecre-text-sm ecre-font-semibold ecre-inline-flex ecre-items-center ecre-gap-3 ecre-transition hover:ecre-bg-violet-700 hover:ecre-text-white" href='https://lnk.wppool.dev/11jUiR1' target='__blank'>
                            <span className="">{ translate( 'watch_videos' ) }</span>
                            <span className="icon ecre-leading-[1]">
                                {ecreIcons.rightArrowTwo}
                            </span>
                        </a>
                    </div>
                </div>

                <div className="help-documentation__item ecre-min-h-[238px] ecre-p-4 ecre-bg-white ecre-rounded ecre-flex ecre-items-start ecre-flex-col">
                    <div className="icon-wrapper ecre-mb-4 ecre-h-[70px] ecre-w-[70px] ecre-flex ecre-items-center ecre-justify-center">
                        {ecreIcons.audio}
                    </div>

                    <div className="text ecre-mt-auto">
                        <h6 className="ecre-text-black ecre-text-sm ecre-font-medium ecre-mt-0 ecre-mb-1.5">{ translate( 'customer_support' ) }</h6>
                        <p className="ecre-text-gray-500 ecre-text-xs ecre-font-normal ecre-mb-5">{ translate( 'support_info' ) }</p>
                        {isPro ? (
                            <button onClick={handleToggleSupportModal} className="ecre-group ecre-cursor-pointer ecre-mt-auto ecre-px-4 ecre-py-2.5 ecre-bg-white ecre-rounded-lg ecre-outline-0 ecre-shadow-none ecre-no-underline ecre-border ecre-border-solid ecre-border-violet-700 ecre-text-violet-700 ecre-text-sm ecre-font-semibold ecre-inline-flex ecre-items-center ecre-gap-3 ecre-transition hover:ecre-bg-violet-700 hover:ecre-text-white">
                                <span className="">{ translate( 'contact_support' ) }</span>
                                <span className="icon ecre-leading-[1]">
                                    {ecreIcons.rightArrowTwo}
                                </span>
                            </button>
                        ) : (
                            <a className="ecre-group ecre-cursor-pointer ecre-mt-auto ecre-px-4 ecre-py-2.5 ecre-bg-white ecre-rounded-lg ecre-outline-0 ecre-shadow-none ecre-no-underline ecre-border ecre-border-solid ecre-border-violet-700 ecre-text-violet-700 ecre-text-sm ecre-font-semibold ecre-inline-flex ecre-items-center ecre-gap-3 ecre-transition hover:ecre-bg-violet-700 hover:ecre-text-white" href='https://lnk.wppool.dev/MW3eT7w' target='__blank'>
                                <span className="">{ translate( 'contact_support' ) }</span>
                                <span className="icon ecre-leading-[1]">
                                    {ecreIcons.rightArrowTwo}
                                </span>
                            </a>
                        )}

                    </div>
                </div>

                <div className="help-documentation__item ecre-min-h-[238px] ecre-p-4 ecre-bg-white ecre-rounded ecre-flex ecre-items-start ecre-flex-col">
                    <div className="icon-wrapper ecre-mb-4 ecre-h-[70px] ecre-w-[70px] ecre-flex ecre-items-center ecre-justify-center">
                        {ecreIcons.community}
                    </div>

                    <div className="text ecre-mt-auto">
                        <h6 className="ecre-text-black ecre-text-sm ecre-font-medium ecre-mt-0 ecre-mb-1.5">{ translate( 'community_forum' ) }</h6>
                        <p className="ecre-text-gray-500 ecre-text-xs ecre-font-normal ecre-mb-5">{ translate( 'community_info' ) }</p>
                        <a className="ecre-group ecre-cursor-pointer ecre-mt-auto ecre-px-4 ecre-py-2.5 ecre-bg-white ecre-rounded-lg ecre-outline-0 ecre-shadow-none ecre-no-underline ecre-border ecre-border-solid ecre-border-violet-700 ecre-text-violet-700 ecre-text-sm ecre-font-semibold ecre-inline-flex ecre-items-center ecre-gap-3 ecre-transition hover:ecre-bg-violet-700 hover:ecre-text-white" href='https://lnk.wppool.dev/fSeHnb0' target='__blank'>
                            <span className="">{ translate( 'join_community' ) }</span>
                            <span className="icon ecre-leading-[1]">
                                {ecreIcons.rightArrowTwo}
                            </span>
                        </a>
                    </div>
                </div>
            </div>

            <SupportPopup
                isOpen={isSupportModal}
                onClose={handleToggleSupportModal}
                onEmailRedirect={handleEmailRedirect}
                onCopy={handleCopy}
                copiedItemIndex={copiedItemIndex}
                error={error}
                onClearError={clearError}
            />
        </div>
    );
}

export default DocumentationTab;