import { useEffect, useState } from "react";

export function clickDetective(props_id: any, callback: any) {
  useEffect(() => {
    const node = document.getElementById(props_id);
    function handleClick(event: any) {
      if (node) {
        if (!node.contains(event.target)) {
          if (callback) return callback(event);
        }
      }
    }
    document.addEventListener("click", handleClick);
    return () => document.removeEventListener("click", handleClick);
  }, []);
}

export function getClassName(myui_name: any, className?: any) {

  var text = myui_name
  var new_text: any = [];
  if (Object.prototype.toString.call(text) != '[object Array]') text = [text]
  if (className) new_text.push(className)
  for (var i = 0; i < text.length; i++) {
    if (text[i]) {
      if (!text[i].match(`MYUI-`)) {
        new_text.push(`MYUI-${text[i]}`)
      } else new_text.push(`${text[i]}`)
    }
  }
  return new_text.join(` `)
}

export function getCN(children: any, className?: any) {
  var text = children
  var new_text: any = [];
  if (Object.prototype.toString.call(text) != '[object Array]') text = [text]
  if (className) new_text.push(className)
  for (var i = 0; i < text.length; i++) {
    if (text[i]) {
      if (!text[i].match(`MYUI-`)) {
        new_text.push(`MYUI-${text[i]}`)
      } else new_text.push(`${text[i]}`)
    }
  }
  return new_text.join(` `)
}

export function getDevaice() {
  if (
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(
      navigator.userAgent
    )
  ) {
    return `mobile`;
  } else return `desktop`;
}

export function isDevaice(devaice?: string) {
  if (
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(
      navigator.userAgent
    )
  ) {
    if (devaice) {
      if (devaice == `mobile`) {
        return true;
      } else return false;
    }
    return `mobile`;
  } else {
    if (devaice) {
      if (devaice == `desktop`) {
        return true;
      } else return false;
    }
    return `desktop`;
  }
}

export function isMasive(children: any) {
  if (Object.prototype.toString.call(children) == '[object Array]') {
    return true
  } else return false
}

function declOfNum(number: number, words: any) {
  return words[(number % 100 > 4 && number % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(number % 10 < 5) ? Math.abs(number) % 10 : 5]];
}

export function declCount(i: number, words: any) {
  return declOfNum(i, words);
}

export function randomId(props_id: any, name: string) {
  if (!props_id) return `${name}${Math.floor(Math.random() * 1000000)}`
  return props_id
}

export function radnomPropsId(props_id: any, name: string) {
  const [random_props_id, setProps_id] = useState(`${name}${Math.floor(Math.random() * 1000000)}`);
  useEffect(() => {
    setProps_id(props_id)
  }, [props_id]);
  return random_props_id
}

export function renderProps(props: any, name?: any) {
  if (name == `button`) {
    const button_props = [`aria-label`, `aria-labelledby`, `title`, `data-selected`, `data-id`]
    var new_props: any = {};
    for (var item of button_props) {
      if (props[item]) new_props[item] = props[item]
    }

    return new_props
  }

  props.paddingLeftRight = null;
  props.paddingTopBottom = null;
  props.paddingleft = null;
  props.paddingRight = null;
  props.paddingTop = null;
  props.paddingBottom = null;
  props.ripple = null;
  return props;
}

export function usePadding({
  padding = `default`,
  paddingLeft,
  paddingRight,
  paddingTop,
  paddingBottom,
  paddingLeftRight,
  paddingTopBottom,
}: {
  [x: string]: any;
}) {
  return getCN([
    padding && `MYUI-Padding`,
    !paddingLeftRight &&
    !paddingTopBottom &&
    !paddingLeft &&
    !paddingRight &&
    !paddingTop &&
    !paddingBottom &&
    padding &&
    `MYUI-Padding--${padding}`,

    !paddingLeftRight &&
    paddingLeft &&
    `MYUI-Padding__left--${paddingLeft}`,
    !paddingLeftRight &&
    paddingRight &&
    `MYUI-Padding__right--${paddingRight}`,
    paddingLeftRight && `MYUI-Padding__left--${paddingLeftRight}`,
    paddingLeftRight && `MYUI-Padding__right--${paddingLeftRight}`,

    !paddingTopBottom && paddingTop && `MYUI-Padding__top--${paddingTop}`,
    !paddingTopBottom &&
    paddingBottom &&
    `MYUI-Padding__bottom--${paddingBottom}`,
    paddingTopBottom && `MYUI-Padding__top--${paddingTopBottom}`,
    paddingTopBottom && `MYUI-Padding__bottom--${paddingTopBottom}`,
  ]);
}

export function onLoad(src: any, callback: (event: Event | null, status: "success" | "error") => void) {
  const img = new Image();
  img.onload = (e) => {
    if (callback) callback(e, `success`)
  };
  img.onerror = () => {
    if (callback) callback(null, `error`)
  }
  img.src = src;
}

export function get_typeName(child?: any, child_2?: any) {
  if (child) {
    if (child.type) {
      if (child_2) {
        if (isMasive(child_2)) {
          var status = false
          for (var item of child_2) {
            if (item.type) {
              if (child.type.name == item.type.name) status = true
            }
          }
          return status
        } else {
          if (child_2.type) {
            if (child.type.name == child_2.type.name) return true
          }
        }
      }
    }
  }
  return false
}


export function onSkeleton(skeleton: any, children: any) {
  if (skeleton) {
    return ``
  } else return children
}