"use client";
import { ChapterItem } from "@/app/utils/chapter";
import React, { useMemo } from "react";
import { Card, CardHeader, Chip, Divider, CardBody, Button } from "@nextui-org/react"
import classNames from "classnames";
import { Icon } from "@iconify/react";

export interface ChapterCardProps {
  chapter:ChapterItem
  active:boolean
  onPress?:()=>void
  onMergeNext?:(chapter:ChapterItem)=>void
}

export const  ChapterCard:React.FC<ChapterCardProps> = (props) => {

  const chapterCardTitle = useMemo(()=>{
    return [
      `Chapter ${props.chapter.number}`,
      props.chapter.title
    ].filter(item=>!!item).join(' - ')
  },[props.chapter])

  return (
    <Card
      isPressable
      className={classNames('max-w-[384px] border-1 border-divider/15',{
        "bg-themeBlue/20":props.active
      })}
      shadow="none"
      onPress={props.onPress}
    >
      <CardHeader className="flex items-center justify-between">
        <div className="flex gap-1.5">
          {
            props.active && (
              <Chip
                className="mr-1 text-themeBlue bg-themeBlue/20"
                radius="sm"
                size="sm"
                variant="flat"
              >
                Editing
              </Chip>
            )
          }
          <p className="text-left mr-1">
            {chapterCardTitle}
          </p>
        </div>
        {
          !!props.onMergeNext && (
            <Icon
              icon="material-symbols:cell-merge"
              width={16}
              onClick={()=>{
                props.onMergeNext?.(props.chapter)
              }}
            />
          )
        }
        
        
      </CardHeader>

      <Divider />
      <CardBody>
        <p className="line-clamp-2">
          {
            props.chapter.text.trim().slice(0,300)
          }
        </p>
      </CardBody>
    </Card>
  )
}