import Tooltip from "@/Components/Inputs/RadixTooltip";
import Button, { IButtonClassProps } from "@/Components/Buttons/Button";
import { createButtonClass } from "@/utils/classNameHelpers";
import React, { Fragment, ReactNode } from "react";
import { ReactElement } from "react";


const sizes = ['xs', 'sm', 'med', 'lg', 'xlg']
const types: IButtonClassProps['type'][] = [
    'default',
    'destructive',
    'outline',
    'secondary',
    'ghost',
    'link',
    'create',
    'submit',
    'alert',
    'dark',
    'none'
]
const hrefs = ['https://aoos.org', null]
const tooltipText = ['This is a tooltip', null]

const Row = ({ size }: { size: string }): ReactElement => {
    return (
        <div>
            <h4 className='font-bold text-xl mb-4'>{size}</h4>
            <div className='flex flex-wrap gap-4 whitespace-normal'>
                {
                    hrefs.map(href => (
                        types.map(type => (
                            <Fragment key={`${size}-${type}-${href ? 'with-link' : 'no-link'}`}>{
                                tooltipText.map(tooltip => {
                                    const label = `${size} ${type} ${tooltip ? 'with tt' : 'no tt'} ${href ? 'with link' : 'no link'}`
                                    return <Fragment key={`${size}-${type}-${href ? href : 'no-link'}-${tooltip ? 'with-tt' : 'no-tt'}`}>{
                                        !tooltip ? (
                                            <Button
                                                className='whitespace-nowrap'
                                                size={size}
                                                type={type}
                                                href={href ?? undefined}
                                            >
                                                {label}
                                            </Button>
                                        ) : (
                                            <Tooltip content={tooltip} dark={true} className={`whitespace-nowrap ${createButtonClass({
                                                type,
                                                size
                                            })}`}>
                                                {
                                                    href ? (
                                                        <a href={href}>
                                                            {label}
                                                        </a>
                                                    ) : (

                                                        <>{label}</>

                                                    )
                                                }

                                            </Tooltip>
                                        )
                                    }</Fragment>
                                })
                            }</Fragment>
                        ))
                    ))
                }
            </div>
        </div >
    )
}


const ButtonExample = (): ReactElement => {
    return (
        <div className='flex flex-col gap-4 p-20'>
            {
                sizes.map(size => {
                    return (
                        <Row key={size} size={size} />
                    )
                })
            }
        </div>
    )
}

export default ButtonExample