import { callable, classNames } from 'mixlea-utils-js';
import { View } from '@tarojs/components';

import type { MlBaseFormHeaderProps } from './types';

export function FormHeader(props: MlBaseFormHeaderProps) {
  const {
    headerTitle,
    headerPaddingX,
    headerPaddingLeft,
    headerPaddingRight,
    headerLeftSlots,
    headerRightSlots,
    showHeader,
  } = props;

  if (showHeader || headerTitle || headerLeftSlots || headerRightSlots) {
    const paddingLeft = headerPaddingLeft || headerPaddingX;
    const paddingRight = headerPaddingRight || headerPaddingX;

    return (
      <View
        className={classNames('h-base flex items-center gap-x-base', {
          'pl-base': paddingLeft,
          'pr-base': paddingRight,
        })}
      >
        {headerTitle && (
          <View className="h-full flex items-center gap-x-base px-base font-bold text-secondary">
            {callable(headerTitle)}
          </View>
        )}
        {headerLeftSlots && (
          <View className="h-full flex items-center gap-x-base">{headerLeftSlots?.map((slot) => slot())}</View>
        )}
        <View className="flex-1"></View>
        {headerRightSlots && (
          <View className="h-full flex items-center gap-x-base">{headerRightSlots?.map((slot) => slot())}</View>
        )}
      </View>
    );
  }

  return null;
}