import { Vue } from 'vue-property-decorator';
import { CreateElement, RenderContext, VNode } from 'vue';

const setClassesField = (props: any, size: string, val: any) => {
  switch (size) {
    case 'extra-small':
      props.extraSmallClasses = val;
      return props;
    case 'small':
      props.smallClasses = val;
      return props;
    case 'medium':
      props.mediumClasses = val;
      return props;
    case 'large':
      props.largeClasses = val;
      return props;
    case 'extra-large':
      props.extraLargeClasses = val;
      return props;
    case 'full-width':
      props.fullWidthClasses = val;
      return props;
    case 'custom':
      props.customClasses = val;
      return props;
    default:
      return props;
  }
};

const getComponentName = (child: VNode) => {
  if (child && child.componentOptions) {
    return child.componentOptions.tag;
  }
  return '';
};

/*
 The main question you would ask, when looking at this file is 'what the actual fuck?' followed by
 'why wouldn't you just make keyed maps and map from them?'

 The main answer would be that I really just need a dictionary of stuff to map classes in various situations
 and then adapt this dictionary from the component itself, so the logic should be very, very thin.
 Another answer would be - I'm not sure this thing will survive the next week, so there's that. If it does -
 it is stupidly simple and can be improved. If not - oh well.

 Have fun mapping classes if you want more layout or something.
*/
export default Vue.extend({
  name: 'FormLayout',
  functional: true,

  props: {
    columns: {
      type: String, // yes, these are strings, so you can write columns='2'
      validator(val: any) {
        return ['1', '2', '3'].indexOf(val) !== -1;
      },
      default: () => '1',
    },
    defaultSize: {
      type: String, // if you don't like it for some reason
      default: () => 'medium',
    },
    layoutOne: {
      type: Object,
      default: () => ({
        'extra-small': {
          'col-xs-12': true,
          'col-sm-12': true,
          'col-md-12': true,
          'col-lg-12': true,
          'col-xl-12': true,
        },
        small: {
          'col-xs-12': true,
          'col-sm-12': true,
          'col-md-12': true,
          'col-lg-12': true,
          'col-xl-12': true,
        },
        medium: {
          'col-xs-12': true,
          'col-sm-12': true,
          'col-md-12': true,
          'col-lg-12': true,
          'col-xl-12': true,
        },
        large: {
          'col-xs-12': true,
          'col-sm-12': true,
          'col-md-12': true,
          'col-lg-12': true,
          'col-xl-12': true,
        },
        'extra-large': {
          'col-xs-12': true,
          'col-sm-12': true,
          'col-md-12': true,
          'col-lg-12': true,
          'col-xl-12': true,
        },
        'full-width': {
          'col-xs-12': true,
          'col-sm-12': true,
          'col-md-12': true,
          'col-lg-12': true,
          'col-xl-12': true,
        },
      }),
    },
    layoutTwo: {
      type: Object,
      default: () => ({
        'extra-small': {
          'col-xs-12': true,
          'col-sm-12': true,
          'col-md-6': true,
          'col-lg-6': true,
          'col-xl-6': true,
        },
        small: {
          'col-xs-12': true,
          'col-sm-12': true,
          'col-md-12': true,
          'col-lg-6': true,
          'col-xl-6': true,
        },
        medium: {
          'col-xs-12': true,
          'col-sm-12': true,
          'col-md-6': true,
          'col-lg-6': true,
          'col-xl-6': true,
        },
        large: {
          'col-xs-12': true,
          'col-sm-12': true,
          'col-md-12': true,
          'col-lg-9': true,
          'col-xl-9': true,
        },
        'extra-large': {
          'col-xs-12': true,
          'col-sm-12': true,
          'col-md-12': true,
          'col-lg-12': true,
          'col-xl-9': true,
        },
        'full-width': {
          'col-xs-12': true,
          'col-sm-12': true,
          'col-md-12': true,
          'col-lg-12': true,
          'col-xl-12': true,
        },
      }),
    },
    layoutThree: {
      type: Object,
      default: () => ({
        'extra-small': {
          'col-xs-6': true,
          'col-sm-6': true,
          'col-md-6': true,
          'col-lg-6': true,
          'col-xl-4': true,
        },
        small: {
          'col-xs-12': true,
          'col-sm-6': true,
          'col-md-6': true,
          'col-lg-6': true,
          'col-xl-4': true,
        },
        medium: {
          'col-xs-12': true,
          'col-sm-12': true,
          'col-md-6': true,
          'col-lg-6': true,
          'col-xl-4': true,
        },
        large: {
          'col-xs-12': true,
          'col-sm-12': true,
          'col-md-6': true,
          'col-lg-6': true,
          'col-xl-6': true,
        },
        'extra-large': {
          'col-xs-12': true,
          'col-sm-12': true,
          'col-md-12': true,
          'col-lg-9': true,
          'col-xl-9': true,
        },
        'full-width': {
          'col-xs-12': true,
          'col-sm-12': true,
          'col-md-12': true,
          'col-lg-12': true,
          'col-xl-12': true,
        },
      }),
    },
    defaultFormSizes: {
      type: Object,
      default() {
        return {
          'text-area': 'extra-large',
          'html-block': 'full-width',
          'grid-view': 'full-width',
        };
      },
    },
    ignore: {
      type: Array,
      default() {
        return ['form-item', 'formItem', 'group'];
      },
    },
  },

  render(h: CreateElement, context: RenderContext) {
    // todo
    return h('div', context);
    // const props = context.props;
    // const children = context.children;
    // const result = (children as VNode[]).map((child) => {
    //   const componentName = getComponentName(child);
    //   // todo : camelcase check
    //   if ((props as any).ignore.indexOf(componentName) !== -1) {
    //     return child; // skip it, if it's wrapped already, allowing to manually create the whole layout
    //   }
    //
    //   // I don't know what typing magic would I need to do here to convince it, so I'll throw 'any'
    //   let size = '';
    //   const childProps = ((child) && (child.data) && (child as any).data.props) ? (child as any).data.props : {};
    //
    //   if (childProps.formSize) { // size already set, just pass it on
    //     size = childProps.formSize;
    //   } else {
    //     if (childProps.schema && childProps.schema.rawAttrs && childProps.schema.rawAttrs.width) {
    //       // split into buckets depending on width attribute of schema (bad)
    //       const width = childProps.schema.rawAttrs.width;
    //       if (width < 300) size = 'small';
    //       if (width >= 300 && width < 600) size = 'medium';
    //       if (width >= 600 && width < 900) size = 'large';
    //       if (width >= 900) size = 'extra-large';
    //     } else {
    //       if ((props as any).defaultFormSizes && (props as any).defaultFormSizes.hasOwnProperty(componentName)) {
    //         // found default for specific component, apply that
    //         size = (props as any).defaultFormSizes[componentName];
    //       } else {
    //         // finally just set default
    //         size = childProps.defaultSize;
    //       }
    //     }
    //   }
    //
    //   const columns = (props as any).columns;
    //   let layout = {};
    //
    //   const formItemProps = {
    //     size
    //   };
    //
    //   switch (columns) {
    //     case '1':
    //       layout = (props as any).layoutOne;
    //       break;
    //     case '2':
    //       layout = (props as any).layoutTwo;
    //       break;
    //     case '3':
    //       layout = (props as any).layoutThree;
    //       break;
    //   }
    //
    //   for (const key of Object.keys(layout)) {
    //     setClassesField(formItemProps, key, layout[key]);
    //   }
    //
    //   logger.warn('will render form-item', formItemProps);
    //   return h(FormItem, {props: formItemProps}, [child]);
    // });
    //
    // // calm down the type checker, we can return multiple children, it's fine
    // return h('div', {} , result);
  },
});
