---
import type { HTMLAttributes } from 'astro/types'
import type { ModalProps } from './modal'

import Button from '../Button/Button.astro'

import alert from '../../icons/alert.svg?raw'
import success from '../../icons/circle-check.svg?raw'
import closeIcon from '../../icons/close.svg?raw'
import info from '../../icons/info.svg?raw'
import warning from '../../icons/warning.svg?raw'

import styles from './modal.module.scss'

export type Props = ModalProps<HTMLAttributes<'dialog'>>

const iconMap = {
    info,
    success,
    warning,
    alert
}

const {
    title,
    subTitle,
    showCloseIcon = true,
    closeOnEsc = true,
    closeOnOverlay = true,
    transparent,
    theme,
    className,
    ...rest
} = Astro.props

const close = [
    showCloseIcon && 'icon',
    closeOnEsc && 'esc',
    closeOnOverlay && 'overlay'
].filter(Boolean).join(',')

const classes = [
    styles.modal,
    transparent && styles.transparent,
    theme && styles[theme],
    className
]
---

<dialog
    class:list={classes}
    data-close={close.length ? close : undefined}
    {...rest}
>
    {showCloseIcon && (
        <Button
            theme="flat"
            className={styles.close}
            data-id="close"
            aria-label="close"
        >
            <Fragment set:html={closeIcon} />
        </Button>
    )}
    {title && (
        <strong class={styles.title}>
            {theme && <Fragment set:html={iconMap[theme]} />}
            {title}
        </strong>
    )}
    {subTitle && <div class={styles.subTitle}>{subTitle}</div>}
    <slot />
</dialog>
<div class={styles.overlay} />