// @ts-nocheck
import { Component, Prop, Vue } from 'vue-property-decorator';
import { VNode } from 'vue';

type FieldSize =
  | 'extra-small'
  | 'small'
  | 'medium'
  | 'large'
  | 'extra-large'
  | 'full-width'
  | 'custom'; // add a validator if you run into problems
const getSize = (props: any) => {
  switch (props.size) {
    case 'extra-small':
      return props.extraSmallClasses;
    case 'small':
      return props.smallClasses;
    case 'medium':
      return props.mediumClasses;
    case 'large':
      return props.largeClasses;
    case 'extra-large':
      return props.extraLargeClasses;
    case 'full-width':
      return props.fullWidthClasses;
    case 'custom':
      return props.customClasses;
    default:
      return props.mediumClasses;
  }
};

@Component({})
export default class FormItem extends Vue {
  @Prop({ type: String, default: 'medium' })
  size: string;

  @Prop({
    type: Object,
    default: () => ({
      'col-xs-6': true,
      'col-sm-6': true,
      'col-md-6': true,
      'col-lg-6': true,
      'col-xl-4': true,
    }),
  })
  extraSmallClasses: any;

  @Prop({
    type: Object,
    default: () => ({
      'col-xs-12': true,
      'col-sm-6': true,
      'col-md-6': true,
      'col-lg-6': true,
      'col-xl-4': true,
    }),
  })
  smallClasses: any;

  @Prop({
    type: Object,
    default: () => ({
      'col-xs-12': true,
      'col-sm-12': true,
      'col-md-6': true,
      'col-lg-6': true,
      'col-xl-4': true,
    }),
  })
  mediumClasses: any;

  @Prop({
    type: Object,
    default: () => ({
      'col-xs-12': true,
      'col-sm-12': true,
      'col-md-6': true,
      'col-lg-6': true,
      'col-xl-6': true,
    }),
  })
  largeClasses: any;

  @Prop({
    type: Object,
    default: () => ({
      'col-xs-12': true,
      'col-sm-12': true,
      'col-md-12': true,
      'col-lg-9': true,
      'col-xl-9': true,
    }),
  })
  extraLargeClasses: any;

  @Prop({
    type: Object,
    default: () => ({
      'col-xs-12': true,
      'col-sm-12': true,
      'col-md-12': true,
      'col-lg-12': true,
      'col-xl-12': true,
    }),
  })
  fullWidthClasses: any;

  @Prop({
    type: Object,
    default: () => ({
      'col-xs-12': true,
      'col-sm-12': true,
      'col-md-12': true,
      'col-lg-12': true,
      'col-xl-12': true,
    }),
  })
  customClasses: any;

  render(h, data) {
    if (!data) {
      console.warn('no data for render', h, data, arguments);
      return h('div');
    }

    const props = data.props || {};
    const children = data.children || [];
    const classes = getSize(props);
    (children as VNode[]).forEach((child) => {
      if (!child.data) {
        child.data = {};
      }

      if (!child.data.class) {
        child.data.class = {};
      }

      // sure hope nobody cares if it stops being a string
      if (typeof child.data.class === 'string') {
        child.data.class = child.data.class.split(' ');
      }

      // sure hope nobody starts doing customized arrays that aren't real Arrays
      if (child.data.class instanceof Array) {
        Object.keys(classes).forEach((cl) => {
          if (child.data.class.indexOf(cl) === -1 && classes[cl]) {
            child.data.class.push(cl);
          }
          if (child.data.class.indexOf(cl) !== -1 && !classes[cl]) {
            child.data.class = child.data.class.filter((childClass) => {
              return childClass !== cl;
            });
          }
        });
        return;
      }

      if (typeof child.data.class === 'object') {
        // with this thing you could potentially turn off some classes, but this is not particularly
        // intended, so I wouldn't abuse this without a really, really good reason

        Object.keys(classes).forEach((cl) => {
          child.data.class[cl] = classes[cl];
        });
        return;
      }
    });

    // horrible hack; for some reason typings think they need a single root
    // let's convince them it will be fine (spoiler: it will not be fine, but nobody cares)

    return h('div', {}, children);
  }
}
