import type { PropType } from 'vue'
import { defineComponent } from 'vue'
import { getPrefixCls } from '../_utils/getPrefixCls'
import Icon from '../icon'
import './index.scss'

export default defineComponent({
  name: 'Spin',
  props: {
    loading: { type: Boolean, default: false },
    opacity: { type: Number as PropType<number>, default: 0.6 },
    rounded: { type: Boolean, default: true },
    icon: { type: String as PropType<string>, default: 'mingcute:loading-line' },
    size: { type: Number as PropType<number>, default: 16 },
    rotate: { type: Number as PropType<number>, default: 360 },
    tip: { type: String as PropType<string>, default: '' },
  },
  setup(props, { slots }) {
    const prefixCls = getPrefixCls('spin')

    return () => {
      if (!props.loading && !slots.default)
        return null

      return (
        <div class={`${prefixCls}-wrapper`}>
          {slots.default?.()}
          {props.loading && (
            <div
              class={`${prefixCls}`}
              style={{
                background: slots.default ? `rgba(255,255,255,${props.opacity})` : 'transparent',
                borderRadius: props.rounded ? '4px' : 0,
              }}
            >
              <div class={`${prefixCls}-content`}>
                <Icon
                  icon={props.icon}
                  size={props.size}
                  spin
                />
                {props.tip && <span class={`${prefixCls}-tip`}>{props.tip}</span>}
              </div>
            </div>
          )}
        </div>
      )
    }
  },
})