"use client";

import { createElement } from "react";

export function TodoHeader({
    children,
    className,
    as = "div",
}: {
    children: React.ReactNode;
    className?: string;
    as?: React.ElementType;
}) {
    return createElement(as, { className }, children);
}

export function TodoCardContainer({
    children,
    className,
    as = "div",
}: {
    children: React.ReactNode;
    className?: string;
    as?: React.ElementType;
}) {
    return createElement(as, { className }, children);
}

export function TodoCardContent({
    children,
    className,
    as = "div",
}: {
    children: React.ReactNode;
    className?: string;
    as?: React.ElementType;
}) {
    return createElement(as, { className }, children);
}

/**
 * 二进制位码说明:
 * 000 不需要权限也不需要确认
 * 001 需要确认是否删除
 * 010 需要权限
 */
const CODE = {
    NOTHING: 0b000,
    NEED_CONFIRM: 0b001,
    NEED_AUTH: 0b010,
} as const;

type CodeType = (typeof CODE)[keyof typeof CODE];

interface TodoCardCloseButtonProps {
    children: React.ReactNode;
    className?: string;
    as?: React.ElementType;
    codeNumber?: CodeType;
    onClick?: () => void;
}

export function TodoCardCloseButton({
    children,
    className,
    as = "button",
    onClick,
    codeNumber = CODE.NEED_CONFIRM,
}: TodoCardCloseButtonProps) {
    const handleClick = (e: React.MouseEvent) => {
        e.stopPropagation();
        if (codeNumber & CODE.NEED_AUTH) {
            alert("需要权限");
            return;
        }
        if (codeNumber & CODE.NEED_CONFIRM) {
            if (!confirm("需要确认是否删除")) return;
        }
        onClick?.();
    };

    return createElement(as, { className, onClick: handleClick }, children);
}

<div className="flex gap-4">
    {todos.map((todo) => (
        <TodoCardContainer
            className="border border-green-500 rounded-lg px-2"
            as="div"
            key={todo.id}
        >
            <TodoHeader className="flex justify-between">
                <div>{todo.title}</div>
                <TodoCardCloseButton
                    className="text-red-500"
                    onClick={() =>
                        setTodos(todos.filter((t) => t.id !== todo.id))
                    }
                >
                    close
                </TodoCardCloseButton>
            </TodoHeader>
            <TodoCardContent>
                <div>{todo.description}</div>
                <div>{todo.dueDate}</div>
                <div>{todo.priority}</div>
            </TodoCardContent>
        </TodoCardContainer>
    ))}
</div>

const withThink = <P extends object>(
    Component: ComponentType<P>, 
    ThinkComponent: FunctionComponent<ThinkContentStyleProps>) => 
{
  return (props: P & { content: string }) => {
    const { 
        content, 
        think_content, 
        closedMatch, 
        openMatch 
    } = parseThinkContent(props.content)

    return (
      <>
        <Think 
            closedMatch={!!closedMatch} 
            openMatch={!!openMatch} 
            think_content={think_content} 
            ThinkComponent={ThinkComponent} />
        <Component {...props} content={content} />
      </>
    )
  }
}

export const ContentWithThink = memo(withThink(Content, ThinkContentStyle), (prev, next) => {
  return prev.content === next.content
})

const Think = ({ closedMatch, openMatch, think_content, ThinkComponent }: ThinkProps) => {
  const [status, setStatus] = useState<ThinkStatus>(ThinkStatus.completed)

  const match = useMemo(() => {
    return openMatch || closedMatch
  }, [openMatch, closedMatch])

  useEffect(() => {
    if (openMatch) {
      setStatus(ThinkStatus.thinking)
    }
  }, [openMatch])

  useEffect(() => {
    if (closedMatch) {
      setStatus(ThinkStatus.completed)
    }
  }, [closedMatch])

  useEffect(() => {
    EE.on(ThinkEvent, ({ thinkStatus }: { thinkStatus: ThinkStatus; }) => {
      // 完整匹配到了
      if (closedMatch) {
        setStatus(ThinkStatus.completed)
        return
      }
      setStatus(thinkStatus)
    })
    return () => {
      EE.off(ThinkEvent)
    }
  }, [status])

  return <>{match && <ThinkComponent think_content={think_content} status={status} />}</>
}

() => <ContentWithThink content={content} className={className}/>

const observer = new IntersectionObserver((entries, observer) => {
    if('discover'){
        // load more
    }
})

observer.observe('dom' as HTMLElement)