// Utils
import { createNamespace, isObject, isDef } from '../utils';
import { route, routeProps } from '../composition/use-route';

// Mixins
import { ChildrenMixin } from '../mixins/relation';

// Components
import Icon from '../icon';
import Badge from '../badge';

const [createComponent, bem] = createNamespace('tabbar-item');

export default createComponent({
  mixins: [ChildrenMixin('vanTabbar')],

  props: {
    ...routeProps,
    dot: Boolean,
    icon: String,
    name: [Number, String],
    badge: [Number, String],
    iconPrefix: String,
  },

  emits: ['click'],

  data() {
    return {
      active: false,
    };
  },

  computed: {
    routeActive() {
      const { to, $route } = this;
      if (to && $route) {
        const config = isObject(to) ? to : { path: to };
        const pathMatched = config.path === $route.path;
        const nameMatched = isDef(config.name) && config.name === $route.name;

        return pathMatched || nameMatched;
      }
    },
  },

  methods: {
    onClick(event) {
      this.parent.onChange(this.name || this.index);
      this.$emit('click', event);
      route(this.$router, this);
    },

    genIcon(active) {
      if (this.$slots.icon) {
        return this.$slots.icon({ active });
      }

      if (this.icon) {
        return <Icon name={this.icon} classPrefix={this.iconPrefix} />;
      }
    },
  },

  render() {
    const active = this.parent.route ? this.routeActive : this.active;
    const color = this.parent[active ? 'activeColor' : 'inactiveColor'];

    return (
      <div class={bem({ active })} style={{ color }} onClick={this.onClick}>
        <div class={bem('icon')}>
          {this.genIcon(active)}
          <Badge dot={this.dot} badge={this.badge} />
        </div>
        <div class={bem('text')}>
          {this.$slots.default ? this.$slots.default({ active }) : null}
        </div>
      </div>
    );
  },
});