import { IconGridDots, IconLayoutList } from '@tabler/icons-solidjs'
import { createSignal } from 'solid-js'

export const VIEWDATA = Object.freeze(
  new Proxy(
    { list: 'list', grid: 'grid' },
    {
      get: (target, prop) => target[prop] ?? 'list',
    },
  ),
)

export default function ViewSwitch(props) {
  const [view, setView] = createSignal(VIEWDATA['list'])

  const selectView = (view, event) => {
    event.preventDefault()
    setView(view)
    props.switchView && props.switchView(view)
  }

  return (
    <div class="view-switch join">
      <button
        class="btn join-item btn-sm"
        classList={{ 'btn-primary': view() === VIEWDATA['list'] }}
        onClick={[selectView, VIEWDATA['list']]}
      >
        <IconLayoutList size={15} />
      </button>
      <button
        class="btn join-item btn-sm"
        classList={{ 'btn-primary': view() === VIEWDATA['grid'] }}
        onClick={[selectView, VIEWDATA['grid']]}
      >
        <IconGridDots size={15} />
      </button>
    </div>
  )
}
