import { FC, type ReactNode } from "react";
import { PresetsHaveNoPermissionToLoad } from "./PresetsHaveNoPermissionToLoad";
import classNames from "classnames";
import { __, urls } from "../../globals";
import { EmulatedButton } from "../EmulatedButton";
import { Button } from "../cards/Button";

export type TreeSupportProps = {
}

export const TreeSupport: FC<TreeSupportProps> = ({}) => {
    return <div className="px-10 py-20 w-full flex justify-center items-center">
        <div className="grid grid-cols-2 gap-5 justify-center items-start max-w-200">
            <div className="rounded-[26px] bg-gray-200/30 py-6 px-1 border-px border-gray-200/40">
                <CTA
                    decoration={<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="min-w-12 max-w-12 min-h-12 max-h-12">
                        <path fillRule="evenodd" d="M19.449 8.448 16.388 11a4.52 4.52 0 0 1 0 2.002l3.061 2.55a8.275 8.275 0 0 0 0-7.103ZM15.552 19.45 13 16.388a4.52 4.52 0 0 1-2.002 0l-2.55 3.061a8.275 8.275 0 0 0 7.103 0ZM4.55 15.552 7.612 13a4.52 4.52 0 0 1 0-2.002L4.551 8.45a8.275 8.275 0 0 0 0 7.103ZM8.448 4.55 11 7.612a4.52 4.52 0 0 1 2.002 0l2.55-3.061a8.275 8.275 0 0 0-7.103 0Zm8.657-.86a9.776 9.776 0 0 1 1.79 1.415 9.776 9.776 0 0 1 1.414 1.788 9.764 9.764 0 0 1 0 10.211 9.777 9.777 0 0 1-1.415 1.79 9.777 9.777 0 0 1-1.788 1.414 9.764 9.764 0 0 1-10.212 0 9.776 9.776 0 0 1-1.788-1.415 9.776 9.776 0 0 1-1.415-1.788 9.764 9.764 0 0 1 0-10.212 9.774 9.774 0 0 1 1.415-1.788A9.774 9.774 0 0 1 6.894 3.69a9.764 9.764 0 0 1 10.211 0ZM14.121 9.88a2.985 2.985 0 0 0-1.11-.704 3.015 3.015 0 0 0-2.022 0 2.985 2.985 0 0 0-1.11.704c-.326.325-.56.705-.704 1.11a3.015 3.015 0 0 0 0 2.022c.144.405.378.785.704 1.11.325.326.705.56 1.11.704.652.233 1.37.233 2.022 0a2.985 2.985 0 0 0 1.11-.704c.326-.325.56-.705.704-1.11a3.016 3.016 0 0 0 0-2.022 2.985 2.985 0 0 0-.704-1.11Z" clipRule="evenodd" />
                    </svg>}
                    title="Get Help"
                    size="smaller"
                    desc={["Need help configuring an offer or fixing a bug? We've got your back."]}
                    button={<Button preset="blue" width={'wrap'} size={'extra-small'} onClick={() => window.open('https://wordpress.org/support/plugin/coupons-plus-for-woocommerce/', '__blank')}>
                    <div className={'flex items-center gap-2'}>
                            <div className={classNames('relative  transition-all duration-200 flex items-center gap-2 pl-1', {
                        })}>
                                <span>{__('Open a Support Ticket')}</span>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="min-w-5 max-w-5 min-h-5 max-h-5">
                                <path fillRule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z" clipRule="evenodd" />
                            </svg>
                        </div>
                    </div>
                </Button>}
                />
            </div>
            <CTA
                decoration={<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="min-w-12 max-w-12 min-h-12 max-h-12">
                        <path fillRule="evenodd" d="M6 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6Zm1.5 1.5a.75.75 0 0 0-.75.75V16.5a.75.75 0 0 0 1.085.67L12 15.089l4.165 2.083a.75.75 0 0 0 1.085-.671V5.25a.75.75 0 0 0-.75-.75h-9Z" clipRule="evenodd" />
                    </svg>
                }
                title="Guides & Docs"
                size="smaller"
                desc={["Browse our official guides and tutorials to help you get the most out of your coupons."]}
                button={<Button preset="blue" width={'wrap'} size={'extra-small'} onClick={() => window.open(urls.docs, '__blank')}>
                <div className={'flex items-center gap-2'}>
                        <div className={classNames('relative  transition-all duration-200 flex items-center gap-2 pl-1', {
                    })}>
                        <span>{__('View Docs')}</span>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="min-w-5 max-w-5 min-h-5 max-h-5">
                            <path fillRule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z" clipRule="evenodd" />
                        </svg>
                    </div>
                </div>
            </Button>}
            />
        </div>
    </div>
};

const CTA = ({decoration, title, desc, button, size = 'normal'}: {decoration?: ReactNode, title: string, desc?: string[], button?: ReactNode, size?: 'normal' | 'smaller'}) => {
    return <div className="space-y-4 py-1 px-6 text-center flex flex-col items-start h-full justify-center text-gray-650 ">
        {decoration}
        <div className="max-w-90 space-y-1 flex flex-col items-start">
            <h1 className={classNames("text-gray-650/100 font-regular", {
                'text-5x': size == 'normal',
                'text-3x': size == 'smaller'
            })}>{title || __('Import ready-to-use presets!')}</h1>
            {(desc?.length ? desc : []).map(desc => <p className={classNames("text-gray-650/70 text-left", {
                'text-smaller-0 leading-4': true//size === 'normal',
                //'text-smaller-1 leading-3': size === 'smaller',
            })} style={{ textWrap: 'balance' }}>{desc}</p>)}
        </div>
        {button}
    </div>
}