---
import * as interfaces from '../../lib/interfaces.ts'
import { snakeToKebab } from '../../lib/style-helpers.ts'
import RichText from './RichText.astro'
import NotionBlocks from '../NotionBlocks.astro'
import '../../styles/notion-color.css'

export interface Props {
  block: interfaces.Block
  headings: interfaces.Block[]
}

const { block, headings }: Props = Astro.props

const todos =
  block.ListItems?.filter(
    (b: interfaces.Block) => b.Type === 'to_do' && b.ToDo,
  ) ?? (block.ToDo && block.Type === 'to_do' ? [block] : [])

if (todos.length === 0) {
  return null
}
---

<div class="to-do">
  {
    todos.map((todoBlock: interfaces.Block) => {
      const todo = todoBlock.ToDo
      if (!todo) return null
      return (
        <div class={snakeToKebab(todo.Color)}>
          <input type="checkbox" checked={todo.Checked} disabled />
          {todo.RichTexts.map((richText: interfaces.RichText) => {
            if (todo.Checked) {
              return (
                <s>
                  <RichText richText={richText} />
                </s>
              )
            }
            return <RichText richText={richText} />
          })}
          {todo.Children && (
            <NotionBlocks blocks={todo.Children} headings={headings} />
          )}
        </div>
      )
    })
  }
</div>

<style>
  .to-do {
    color: #222;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.8rem;
    padding-inline-start: 1rem;
  }
  .to-do > div {
  }
  .to-do > div > input {
  }
  .to-do > div > s {
    color: var(--accents-3);
  }
</style>
