'use client'

import styles from './styles.module.scss'
import Image from 'next/image'
import family from './family.svg'
import bible from './bible.svg'
import language from './language.svg'
import { useState } from 'react'
import Link from 'next/link'
import classNames from 'classnames'
import { useTime } from '@/hooks/useTime'

export type MassTableRowProps = {
  id: string
  date: string
  type: 'MASS' | 'FAMILY' | 'WORD' | 'LANGUAGE' | 'OTHER'
  cancelled: boolean
}

export const MassTableRow = ({
  id,
  date,
  type,
  cancelled,
}: MassTableRowProps) => {
  const [symbol, setSymbol] = useState('')
  const time = useTime(date)
  const day = new Date(date).toLocaleDateString("de-DE", {weekday: 'long'})

  return (
    <Link
      href={`/gottesdienst/${id}`}
      className={styles.link}
    >
      <div
        className={styles.row}
        onMouseEnter={() => setSymbol('†')}
        onMouseLeave={() => setSymbol('')}
      >
        <div className={classNames({ [styles.cancelled]: cancelled }, styles.day)}>{day}</div>
        <div className={styles.symbol}>{!cancelled && symbol}</div>
        <div className={styles.time}>
          <span className={classNames({ [styles.cancelled]: cancelled })}>
            {time}
          </span>

          {!cancelled && type === 'FAMILY' && (
            <Image src={family} width={18} height={18} alt={'Familiengottesdienst'} />
          )}

          {!cancelled && type === 'WORD' && (
            <Image src={bible} width={18} height={18} alt={'Wortgottesfeier'} />
          )}

          {!cancelled && type === 'LANGUAGE' && (
            <Image src={language} width={18} height={18} alt={'Fremdsprache'} />
          )}
        </div>

        {cancelled && <span className={styles.cancelledLabel}>Abgesagt</span>}
      </div>
    </Link>
  )
}
