import React from "react"
import Image, { Iimage } from "./Image"
import { Link } from "@onegeo-suite/gatsby-theme-onegeo"
import cx from "classix"

export interface ICard extends Iimage {
    children?: React.ReactNode
    name?: string
    description?: string
    url?: string
    anime?: boolean
    layout?: "top" | "left" | "full"
    size?: "xs" | "base" | "xl"
    options?: object
}

const layoutClass = {
    full_base: {
        main: "image-full ",
        title: "",
        description: "",
        image: "h-52",
    },
    top_base: {
        main: "",
        title: "",
        description: "h-24",
        image: "h-52",
    },
    top_xs: {
        main: "",
        title: "",
        description: "h-12",
        image: "h-28",
    },
    top_xl: {
        main: "",
        title: "",
        description: "h-32",
        image: "h-72",
    },
    left_base: {
        main: "card-side h-52 w-full ",
        title: "",
        description: "",
        image: "min-w-[320px] max-w-[320px]",
    },
    left_xs: {
        main: "card-side h-28 w-full ",
        title: "",
        description: "line-clamp-2",
        image: "min-w-[80px] max-w-[100px]",
    },
    left_xl: {
        main: "card-side h-72 w-full lg:hover:translate-x-2 lg:hover:-translate-y-0",
        title: "",
        description: "line-clamp-2",
        image: "min-w-[450px] max-w-[450px]",
    },
}

const CardContent = (props: ICard) => {
    const {
        children,
        layout = "top",
        name,
        description,
        image,
        size = "base",
        options = {},
    } = props

    const lClass = layoutClass[layout + "_" + size] || layoutClass["top_base"]

    console.log("image", image)
    // Options from Directus (config user)
    const oClass = options.class || {}

    return (
        <>
            {image ? (
                // <figure>
                //     <img
                //         src={image.publicURL}
                //     />
                // </figure>
                <figure><div className={cx(lClass.image, oClass.image)}>
                    <Image
                        image={image}
                        className={cx(
                            "h-full w-full object-cover",
                            oClass.imageComponent
                        )}
                    />
                </div>
                </figure>
            ) : null}
            <div className={cx("card-body", oClass.body)}>
                {name ? (
                    <h2
                        className={cx(
                            "card-title uppercase",
                            lClass.title,
                            oClass.title
                        )}
                    >
                        {name}
                    </h2>
                ) : null}
                {description ? (
                    <div
                        className={cx(
                            "overflow-hidden text-ellipsis text-justify ",
                            lClass.description,
                            oClass.description
                        )}
                        dangerouslySetInnerHTML={{ __html: description }}
                    />
                ) : null}
                {children}
            </div>
        </>
    )
}

const Card = (props: ICard) => {
    const {
        className = "",
        anime = true,
        layout = "top",
        size = "base",
        url,
        options = {},
    } = props

    const transition = anime
        ? "lg:transition duration-200 ease-in-out lg:hover:-translate-y-2 lg:hover:shadow-xl "
        : ""

    const lClass = layoutClass[layout + "_" + size] || layoutClass["top_base"]

    const oClass = options.class || {}

    return url ? (
        <Link
            to={url}
            className={cx(
                "card card-compact  bg-base-100 text-base-content shadow-lg",
                lClass.main,
                transition,
                className,
                oClass.main
            )}
        >
            <CardContent {...props} />
        </Link>
    ) : (
        <div
            className={cx(
                "card card-compact bg-base-100 text-base-content shadow-lg",
                lClass.main,
                transition,
                className,
                oClass.main
            )}
        >
            <CardContent {...props} />
        </div>
    )
}

export default Card