import React, { forwardRef, Ref, useContext, useState } from "react";
import classNames from "classnames";
import { StyledProps } from "../_type";
import { useConfig } from "../_util/config-context";
import { Text, TextProps } from "../text";
import { Badge } from "../badge";
import { TimelineContext } from "./TimelineContext";
import { Justify } from "../justify";
import { Button } from "../button";

export interface TimelineItemProps extends StyledProps {
  /**
   * 节点主题
   * @default "default"
   */
  theme?: "default" | "success" | "danger";

  /**
   * 节点标题
   */
  title?: React.ReactNode;

  /**
   * 自定义节点图标
   */
  icon?: React.ReactNode;

  /**
   * 节点标签，用于传递时间相关标记
   */
  label?: React.ReactNode;

  /**
   * 是否可折叠
   * @default false
   */
  collapsable?: boolean;

  /**
   * 是否默认折叠
   *
   * *当 `collapsable` 启用时生效*
   *
   * @default false
   */
  defaultCollapsed?: boolean;

  /**
   * 节点内容
   */
  children?: React.ReactNode;
}

const textThemeMap: Record<
  TimelineItemProps["theme"],
  TextProps<any>["theme"]
> = {
  default: undefined,
  success: "success",
  danger: "danger",
};

export const TimelineItem = forwardRef(function TimelineItem(
  {
    theme,
    title,
    label,
    icon,
    children,
    collapsable,
    defaultCollapsed,
    className,
    ...props
  }: TimelineItemProps,
  ref: Ref<HTMLDivElement>
) {
  const { classPrefix } = useConfig();
  const { light, alternately, index = 0 } = useContext(TimelineContext);
  const [collapsed, setCollapsed] = useState(collapsable && defaultCollapsed);
  return (
    <div
      ref={ref}
      className={classNames(`${classPrefix}-timeline-item`, className, {
        [`${classPrefix}-timeline-item--right`]: alternately && index % 2,
      })}
      {...props}
    >
      <div className={`${classPrefix}-timeline-item__decoration`}>
        <span className={`${classPrefix}-timeline-item__dot`}>
          {icon || <Badge ring theme={theme} />}
        </span>
        <span className={`${classPrefix}-timeline-item__line`} />
      </div>
      {light && (
        <div className={`${classPrefix}-timeline-item__title`}>
          <h3 className={`${classPrefix}-text-weight`}>
            {typeof title !== "undefined" ? title : children}
          </h3>
        </div>
      )}
      <div className={`${classPrefix}-timeline-item__info`}>
        <span className={`${classPrefix}-text-label`}>{label}</span>
      </div>
      {!light &&
        (typeof title !== "undefined" || typeof children !== "undefined") && (
          <div className={`${classPrefix}-timeline-item__card`}>
            {collapsable ? (
              <Justify
                left={
                  <Text
                    parent="h3"
                    className={`${classPrefix}-timeline-item__card-name`}
                    theme={textThemeMap[theme]}
                  >
                    {title}
                  </Text>
                }
                right={
                  <Button
                    type="icon"
                    icon={collapsed ? "arrowdown" : "arrowup"}
                    onClick={() => setCollapsed(v => !v)}
                  />
                }
              />
            ) : (
              <Text
                parent="h3"
                className={`${classPrefix}-timeline-item__card-name`}
                theme={textThemeMap[theme]}
              >
                {title}
              </Text>
            )}
            {!collapsed && (
              <Text parent="div" theme="label">
                {children}
              </Text>
            )}
          </div>
        )}
    </div>
  );
});

TimelineItem.displayName = "TimelineItem";