import React, {ComponentProps, FC} from "react";
import {Note} from "./tree/cards";
import {motion} from "framer-motion";
import classNames from "classnames";

export type ToolTipProps = Note & {
    icon?: React.ReactNode
    width?: 'fixed' | 'full',
    style?: 'light',
    background?: 'normal' | 'lighter',
    titleAndContentGap?: 'narrower' | 'longer',
    mainContentAlignment?: 'edge' | 'title'
    mainContentTextColor?: ComponentProps<'div'>['className']
    animationDirection?: 'left-to-right' | 'bottom-to-top',
    animate?: boolean
}

export const ToolTip: FC<ToolTipProps> = ({
                                              title,
                                              content,
                                              width = 'fixed',
                                              background = 'normal',
                                              mainContentAlignment = 'edge',
                                              mainContentTextColor = 'text-gray-700',
                                              titleAndContentGap = 'longer',
                                              animationDirection = 'left-to-right',
                                              animate = true,
                                              style
                                          }) => {
    const targetAxis = animationDirection === 'left-to-right' ? 'x' : 'y';

    if (!content || !content.length || !content.filter(c => !!c).length) {
        return null;
    }
    return <motion.div
        initial={animate ? {opacity: 0, [targetAxis]: -20} : undefined}
        animate={animate ? {opacity: 1, [targetAxis]: 0} : undefined}
        exit={animate ? {opacity: 0, [targetAxis]: -20} : undefined}
        transition={animate ? {
            opacity: {duration: 0},
            [targetAxis]: {duration: 0.2}
        } : undefined}
    >
        <div className={classNames('rounded-1 border-gray-250--- --border-px bg-opacity-50 px-4 py-3', {
            'max-w-70': width === 'fixed',
            'w-full': width === 'full',
            'bg-gray-200': background === 'normal' && style !== 'light',
            'bg-gray-150': background === 'lighter' && style !== 'light',
            'bg-gray-150 bg-opacity-10': style === 'light',
            'space-y-3': titleAndContentGap === 'longer',
            'space-y-0': titleAndContentGap === 'narrower',
        })}>
            {title && <div className="flex items-center space-x-1">
                <div className="flex items-center justify-center --bg-purple-tint-90 ---bg-gray-500 rounded-5">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
                         stroke="currentColor" className="min-w-4  min-h-4 max-4 max-h-4">
                        <path strokeLinecap="round" strokeLinejoin="round"
                              d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/>
                    </svg>
                </div>
                <div className="text-base --font-medium text-gray-850">{title}</div>
            </div>
            }
            <div className={classNames('--text-smaller-1 text-base space-y-3 ', {
                'ml-5': mainContentAlignment === 'title',
            })}>
                {content?.map(content => <p
                    className={`leading-[18px] ${style === 'light' ? 'text-gray-500' : mainContentTextColor}`}>{content}</p>)}
            </div>
        </div>
    </motion.div>
}