import React from "react";
import classNames from "classnames";
import { StyledProps } from "../_type";
import { JustifyProps, Justify } from "../justify";
import { useConfig } from "../_util/config-context";

/**
 * 日历面板
 */
type ContainerProps = StyledProps & { children: React.ReactNode };

export const CalendarPanel = React.forwardRef(function CalendarPanel(
  {
    className,
    children,
    rangeMode = false,
    timeMode = false,
    ...props
  }: ContainerProps & { rangeMode?: boolean; timeMode?: boolean },
  ref: React.Ref<HTMLDivElement>
) {
  const { classPrefix } = useConfig();

  return (
    <div
      ref={ref}
      className={classNames(`${classPrefix}-calendar`, className, {
        [`${classPrefix}-calendar--date-range`]: rangeMode,
        [`${classPrefix}-calendar--time`]: timeMode,
      })}
      {...props}
    >
      {children}
    </div>
  );
});

CalendarPanel.displayName = "CalendarPanel";

export function CalendarHeader({ style, className, children }: ContainerProps) {
  const { classPrefix } = useConfig();
  return (
    <div
      className={classNames(`${classPrefix}-calendar__header`, className)}
      style={style}
    >
      {children}
    </div>
  );
}

CalendarHeader.displayName = "CalendarHeader";

export function CalendarBody({ style, className, children }: ContainerProps) {
  const { classPrefix } = useConfig();
  return (
    <div
      className={classNames(`${classPrefix}-calendar__body`, className)}
      style={style}
    >
      {children}
    </div>
  );
}

CalendarBody.displayName = "CalendarBody";

export function CalendarFooter({
  style,
  className,
  left,
  right,
}: StyledProps & JustifyProps) {
  const { classPrefix } = useConfig();
  return (
    <div
      className={classNames(`${classPrefix}-calendar__footer`, className)}
      style={style}
    >
      <Justify left={left} right={right} />
    </div>
  );
}

CalendarFooter.displayName = "CalendarFooter";

export default {
  Panel: CalendarPanel,
  Header: CalendarHeader,
  Body: CalendarBody,
  Footer: CalendarFooter,
};