---
import Prism from 'prismjs'
import 'prismjs/components/prism-css'
import 'prismjs/components/prism-diff'
import 'prismjs/components/prism-docker'
import 'prismjs/components/prism-elixir'
import 'prismjs/components/prism-go'
import 'prismjs/components/prism-hcl'
import 'prismjs/components/prism-java'
import 'prismjs/components/prism-json'
import 'prismjs/components/prism-python'
import 'prismjs/components/prism-ruby'
import 'prismjs/components/prism-sql'
import 'prismjs/components/prism-typescript'
import 'prismjs/components/prism-yaml'
import * as interfaces from '../../lib/interfaces'
import '../../styles/syntax-coloring.css'
import Caption from './Caption.astro'

export interface Props {
  block: interfaces.Block
}

const { block }: Props = Astro.props

if (!block.Code) {
  return null
}

const code = block.Code.RichTexts.map(
  (richText: interfaces.RichText) => richText.Text?.Content || '',
).join('')
const language = block.Code.Language.toLowerCase()
const grammer =
  Prism.languages[language.toLowerCase()] || Prism.languages.javascript
const displayLanguage =
  language === 'plain text' ? 'TEXT' : language.toUpperCase()
---

<figure class="code mac">
  <div class="chrome">
    <div class="dots">
      <span class="dot dot-red" />
      <span class="dot dot-amber" />
      <span class="dot dot-green" />
    </div>
    <div class="meta">
      <span class="lang">{displayLanguage}</span>
    </div>
    <div class="actions">
      <button class="copy" data-code={code} data-done-text="Copied!">
        Copy
      </button>
    </div>
  </div>
  <div class="body">
    {
      /* prettier-ignore */
      language === 'mermaid' ? (
        <pre class="mermaid">{code}</pre>
      ) : (
        <pre><code set:html={Prism.highlight(code, grammer, language)} /></pre>
      )
    }
  </div>
  <Caption richTexts={block.Code.Caption} />
</figure>

<script>
  document.querySelectorAll('button.copy').forEach((button) => {
    button.addEventListener('click', (ev) => {
      const target = ev.target as HTMLElement | null
      if (!target) return
      navigator.clipboard
        .writeText(target.getAttribute('data-code') || '')
        .then(() => {
          const originalText = target.innerText

          target.innerText = target.getAttribute('data-done-text') || target.innerText

          setTimeout(() => {
            target.innerText = originalText
          }, 3000)
        })
    })
  })
</script>

<style>
  .code {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
    margin-bottom: 0.8rem;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
    background: linear-gradient(
        180deg,
        color-mix(in oklab, var(--muted) 12%, transparent),
        transparent 30%
      ),
      var(--background);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
  }

  .chrome {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    background: linear-gradient(
      180deg,
      color-mix(in oklab, var(--muted) 25%, transparent),
      color-mix(in oklab, var(--muted) 12%, transparent)
    );
    border-bottom: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
  }

  .dots {
    display: inline-flex;
    gap: 0.35rem;
  }

  .dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  }
  .dot-red {
    background: #ff5f57;
  }
  .dot-amber {
    background: #febc2e;
  }
  .dot-green {
    background: #28c840;
  }

  .meta {
    display: flex;
    justify-content: center;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: var(--muted-foreground);
    text-transform: uppercase;
    font-weight: 600;
  }

  .actions {
    display: flex;
    justify-content: flex-end;
  }

  .code button.copy {
    border: 1px solid color-mix(in oklab, var(--border) 90%, transparent);
    border-radius: 9999px;
    background: color-mix(in oklab, var(--muted) 20%, transparent);
    color: var(--foreground);
    padding: 0.25rem 0.9rem;
    line-height: 1.2rem;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background-color 120ms ease, transform 120ms ease;
  }

  .code button.copy:hover {
    background: color-mix(in oklab, var(--muted) 30%, transparent);
    transform: translateY(-1px);
  }

  .code .body {
    background: color-mix(in oklab, var(--muted) 12%, transparent);
    min-width: 0;
    width: 100%;
  }

  .code pre {
    box-sizing: border-box;
    overflow: auto;
    max-height: 65vh;
    padding: 1rem 1.1rem 1.3rem;
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: pre;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    background: transparent;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklab, var(--muted-foreground) 60%, transparent)
      transparent;
  }

  .code pre::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .code pre::-webkit-scrollbar-track {
    background: color-mix(in oklab, var(--muted) 14%, transparent);
    border-radius: 999px;
  }

  .code pre::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--muted-foreground) 55%, transparent);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
  }

  .code pre::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
  }

  .code pre::-webkit-scrollbar-corner {
    background: transparent;
  }

  .code pre.mermaid {
    padding: 1.5rem;
  }

  .code pre code {
    display: block;
    color: var(--foreground);
    background: transparent !important;
    padding: 0;
  }

  .lang {
    font-family: var(--font-mono, 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
  }
</style>
