---
import type { HTMLAttributes } from 'astro/types';
import { hashId } from '../util';

export interface Props extends HTMLAttributes<'button'> {
    selector?: string;
    scope?: string;
    theme?: string;
    dark?: boolean;
    hide?: boolean;
}
    
const {
    selector='body',
    scope=hashId(selector),
    theme='dark',
    dark=false,
    hide=false,
    ...attrs
} = Astro.props as Props

const _attrs: Props = {
    onclick: `${theme}Toggle${scope}()`,
    'aria-label': `Toggle ${theme} theme`,
    ...attrs
}
---

<script define:vars={{
    selector,
    scope,
    theme,
    dark
}}>
    const classes = document.querySelector(selector).classList || document.body.classList
    dark && window.matchMedia('(prefers-color-scheme: dark)').matches && sessionStorage.getItem(scope) === null && sessionStorage.setItem(scope, theme)
    sessionStorage.getItem(scope) === theme && classes.add(theme)
    window.themes = window.themes || {}
    window.themes[selector] = window.themes[selector] || []
    !window.themes[selector].includes(theme) && window.themes[selector].push(theme)
    window[`${theme}Toggle${scope}`] = (toggle=!classes.contains(theme)) => {
        classes.forEach(c => c !== theme && window.themes[selector].includes(c) && classes.remove(c))
        toggle
            ? (classes.add(theme), sessionStorage.setItem(scope, theme))
            : (classes.remove(theme), sessionStorage.setItem(scope, ''))
    }
    dark && window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', v => window[`${theme}Toggle${scope}`](v.matches))
</script>

{ !hide && 
    <button {..._attrs}>
        <slot />
    </button>
}