import type { ITouchEvent } from '@tarojs/components';
import { nextTick, showModal } from '@tarojs/taro';
import { View } from '@tarojs/components';
import type { MlButtonProps } from './types';
import { classNames, IFEL, SWITCH } from 'mixlea-utils-js';
import { MlIcon } from '../ml-icon';
import { useMemoFn } from 'mixlea-hooks-react';

export type { MlButtonProps };

export function MlButton({
  color = 'primary',
  height = 'sm',
  minWidth,
  width = 'fit',
  // tooltip,
  confirmMessage,
  contentGapX = 'base',
  theme = 'standard',
  title,
  icon,
  iconPlacement = 'left',
  iconBold,
  iconSize,
  shadow,
  rounded,
  disable,
  paddingX = 'base',
  textSize = 'base',
  fontBold,
  dataset,
  stopClickEventPropagation,
  onClick,
}: MlButtonProps) {
  const handleClick = useMemoFn((e: ITouchEvent) => {
    if (disable || !onClick) {
      return;
    }

    if (stopClickEventPropagation) {
      e.stopPropagation();
      e.preventDefault();
    }

    if (confirmMessage) {
      showModal({
        title: '提示',
        content: typeof confirmMessage === 'boolean' ? '确认操作吗?' : confirmMessage,
        success: function (res) {
          if (res.confirm) {
            nextTick(() => {
              onClick?.({ dataset: dataset });
            });
          }
        },
      });
    } else {
      nextTick(() => {
        onClick?.({ dataset: dataset });
      });
    }
  });

  return (
    <View
      style={{ minWidth: minWidth }}
      data-name="hello"
      className={classNames(
        'inline-block',
        {
          rounded: rounded,
          shadow: shadow,
        },
        SWITCH(height, {
          full: 'h-full',
          lg: 'h-lg',
          md: 'h-md',
          base: 'h-base',
          sm: 'h-sm',
          xs: 'h-xs',
          mini: 'h-mini',
        }),
        SWITCH(width, {
          full: 'w-full',
          fit: 'w-fit',
        }),
        SWITCH(paddingX, {
          none: 'w-fit',
          mini: 'px-mini',
          xs: 'px-xs',
          sm: 'px-sm',
          base: 'px-base',
          md: 'px-md',
          lg: 'px-lg',
          xl: 'px-xl',
        }),
        IFEL(disable, 'cursor-not-allowed', 'cursor-pointer'),
        IFEL(
          disable,
          () =>
            classNames('text-[--text-color-200]', {
              'bg-[--button-bg-[--disable-bgcolor]-color]': theme !== 'flat',
            }),
          () =>
            SWITCH(theme, {
              standard: () => ({
                'border text-white': true,
                'border-primary bg-primary hover:bg-primary/90': color === 'primary',
                'border-secondary bg-secondary hover:bg-secondary/90': color === 'secondary',

                'border-negative bg-negative hover:bg-negative/90': color === 'negative',
                'border-positive bg-positive hover:bg-positive/90': color === 'positive',
                'border-warning bg-warning hover:bg-warning/90': color === 'warning',
              }),
              plain: () => ({
                'border bg-block': true,
                'border-primary text-primary hover:bg-primary/10': color === 'primary',
                'border-secondary text-secondary hover:bg-secondary/10': color === 'secondary',
                'border-negative text-negative hover:bg-negative/10': color === 'negative',
                'border-positive text-positive hover:bg-positive/10': color === 'positive',
                'border-warning text-warning hover:bg-warning/10': color === 'warning',
              }),
              flat: SWITCH(color, {
                primary: 'text-primary hover:text-primary/70',
                secondary: 'text-secondary hover:text-secondary/70',
                negative: 'text-negative hover:text-negative/70',
                positive: 'text-positive hover:text-positive/70',
                warning: 'text-warning hover:text-warning/70',
              }),
            }),
        ),
      )}
      onClick={!disable && onClick ? handleClick : undefined}
    >
      <View
        className={classNames(
          'flex h-full w-full items-center justify-center',
          {
            'flex-row-reverse': iconPlacement === 'right',
          },
          SWITCH(contentGapX, {
            xs: 'gap-x-xs',
            sm: 'gap-x-sm',
            base: 'gap-x-base',
            right: 'flex-row-reverse',
          }),
        )}
      >
        {icon && (
          <MlIcon
            name={icon}
            className={classNames({
              'font-bold': iconBold,
              'text-md': iconSize === 'md',
              'text-lg': iconSize === 'lg',
            })}
          />
        )}
        {title && (
          <View
            className={classNames({
              'font-bold': fontBold,
              'text-md': textSize === 'md',
              'text-lg': textSize === 'lg',
            })}
          >
            {title}
          </View>
        )}
      </View>
    </View>
  );
}