import { useEffect, useState } from 'react'
import { useStore } from '../store'

export default function StatusBar(): React.JSX.Element {
  const pages = useStore((s) => s.pages)
  const curIdx = useStore((s) => s.curIdx)
  const view = useStore((s) => s.view)
  const screens = useStore((s) => s.screens)
  const dirty = useStore((s) => s.dirty)
  const filePath = useStore((s) => s.filePath)

  const [now, setNow] = useState(() => new Date())
  useEffect(() => {
    const t = setInterval(() => setNow(new Date()), 1000)
    return () => clearInterval(t)
  }, [])

  const pad = (x: number): string => (x < 10 ? '0' + x : String(x))
  const viewName = view === 'edit' ? '编辑' : '配置'

  return (
    <div className="statusbar">
      <span className="sb-item">📁 {filePath ? filePath.split(/[\\/]/).pop() : '未命名工程'}</span>
      <span className="sb-item">📄 页面 {pages.length}</span>
      <span className="sb-item">
        🖥️ 屏幕 {screens.length > 0 ? screens.length : '未检测'}
      </span>
      <span className="sb-item">
        <span className={'dirty-dot' + (dirty ? ' on' : '')} />
        {dirty ? '已修改' : '已保存'}
      </span>
      <div className="sb-right">
        <span className="sb-item">当前：{pages[curIdx]?.title ?? '—'}</span>
        <span className="sb-item">视图：{viewName}</span>
        <span className="sb-item">
          {now.getFullYear()}-{pad(now.getMonth() + 1)}-{pad(now.getDate())} {pad(now.getHours())}:{pad(now.getMinutes())}:
          {pad(now.getSeconds())}
        </span>
      </div>
    </div>
  )
}
