import styled from "@emotion/styled"
import type { ItemSection, ItemField } from "opvault.js"
import { FieldType } from "opvault.js"
import { useCallback, useMemo, useState } from "react"
import { parseMonthYear } from "../utils"
import { BigTextView } from "./BigTextView"
import { ErrorBoundary } from "./ErrorBoundary"
import { useItemFieldContextMenu } from "./ItemFieldContextMenu"

const Container = styled.div``

const Password: React.FC<{
  field: ItemSection.Concealed
}> = ({ field }) => {
  const [show, setShow] = useState(false)
  const [bigText, showBigText] = useState(false)

  const { onRightClick, ContextMenuContainer, Item } = useItemFieldContextMenu()
  const onToggle = useCallback(() => setShow(x => !x), [])
  const onCopy = useCallback(() => {
    navigator.clipboard.writeText(field.v)
  }, [field.v])
  const onOpenBigText = useCallback(() => {
    showBigText(true)
  }, [])
  const onCloseBigText = useCallback(() => {
    showBigText(false)
  }, [])

  return (
    <>
      <Container
        onContextMenu={onRightClick}
        onDoubleClick={() => setShow(x => !x)}
        style={{
          fontFamily: "var(--monospace)",
          ...(!show && { userSelect: "none" }),
        }}
      >
        {show ? field.v : "·".repeat(10)}
      </Container>
      {bigText && <BigTextView onClose={onCloseBigText}>{field.v}</BigTextView>}
      <ContextMenuContainer>
        <Item onClick={onCopy}>Copier</Item>
        <Item onClick={onToggle}>{show ? "Cacher" : "Afficher"}</Item>
        {!bigText && <Item onClick={onOpenBigText}>Afficher en gros caractères</Item>}
      </ContextMenuContainer>
    </>
  )
}

const MonthYear: React.FC<{ field: ItemSection.MonthYear }> = ({ field }) => {
  const { year, month } = parseMonthYear(field.v)
  return (
    <Container>
      {month.toString().padStart(2, "0")}/{year.toString().padStart(4, "0")}
    </Container>
  )
}

const DateView: React.FC<{ field: ItemSection.Date }> = ({ field }) => {
  const date = useMemo(() => new Date(field.v * 1000), [field.v])
  return <Container>{date.toLocaleDateString()}</Container>
}

const TextView: React.FC<{ value: string }> = ({ value }) => {
  const { onRightClick, ContextMenuContainer, Item } = useItemFieldContextMenu()
  const onCopy = useCallback(() => {
    navigator.clipboard.writeText(value)
  }, [value])

  return (
    <>
      <Container onContextMenu={onRightClick}>{value}</Container>
      <ContextMenuContainer>
        <Item onClick={onCopy}>Copier</Item>
      </ContextMenuContainer>
    </>
  )
}

export const ItemFieldValue: React.FC<{
  field: ItemSection.Any
}> = ({ field }) => {
  if (field.v == null) {
    return null
  }

  switch (field.k) {
    case "concealed":
      return <Password field={field} />
    case "monthYear":
      return <MonthYear field={field} />
    case "date":
      return <DateView field={field} />
    case "address":
      return (
        <Container style={{ whiteSpace: "pre" }}>
          <div>{field.v.street}</div>
          <div>
            {field.v.city}, {field.v.state} ({field.v.zip})
          </div>
          <div>{field.v.country}</div>
        </Container>
      )
  }

  return (
    <ErrorBoundary>
      <TextView value={field.v} />
    </ErrorBoundary>
  )
}

export const ItemDetailsFieldValue: React.FC<{
  field: ItemField
}> = ({ field }) => {
  if (
    field.type === FieldType.Password ||
    (field.type === FieldType.Text && field.designation === "password")
  ) {
    return <Password field={{ v: field.value } as any} />
  }

  return (
    <ErrorBoundary>
      <Container>{field.value}</Container>
    </ErrorBoundary>
  )
}