import { ViewStyle } from "react-native";
import { DEFAULT_COLOR, useColors } from "../commons";

type NumberString = number | string;

export type StyledProps = {
  flex1?: boolean;
  flexRow?: boolean;
  flexWrap?: boolean;
  hidden?: boolean;
  absolute?: boolean;
  absoluteFill?: boolean;
  shadow?: boolean;
  bgColor?: string;
  //
  zIndex?: number;
  opacity?: number;
  //
  size?: NumberString;
  width?: NumberString;
  height?: NumberString;
  //
  borderWidth?: number;
  borderRadius?: number;
  borderColor?: string;
  //
  allCenter?: boolean;
  contentCenter?: boolean;
  jcStart?: boolean;
  jcCenter?: boolean;
  jcEnd?: boolean;
  jcAround?: boolean;
  jcBetween?: boolean;
  asStart?: boolean;
  asCenter?: boolean;
  asEnd?: boolean;
  atStart?: boolean;
  atCenter?: boolean;
  atEnd?: boolean;
  //
  t?: NumberString;
  b?: NumberString;
  l?: NumberString;
  r?: NumberString;
  m?: NumberString;
  mt?: NumberString;
  mb?: NumberString;
  ml?: NumberString;
  mr?: NumberString;
  mv?: NumberString;
  mh?: NumberString;
  p?: NumberString;
  pt?: NumberString;
  pb?: NumberString;
  pl?: NumberString;
  pr?: NumberString;
  pv?: NumberString;
  ph?: NumberString;
  //
  style?: ViewStyle;
  children?: any;
};

const getASStyle = (props: StyledProps) => {
  if (props.allCenter) {
    return "center";
  }
  if (props.asStart) {
    return "flex-start";
  }
  if (props.asCenter) {
    return "center";
  }
  if (props.asEnd) {
    return "flex-end";
  }
  return undefined;
};

const getATStyle = (props: StyledProps) => {
  if (props.allCenter) {
    return "center";
  }
  if (props.contentCenter) {
    return "center";
  }
  if (props.atStart) {
    return "flex-start";
  }
  if (props.atCenter) {
    return "center";
  }
  if (props.atEnd) {
    return "flex-end";
  }
  return undefined;
};

const getJCStyle = (props: StyledProps) => {
  if (props.allCenter) {
    return "center";
  }
  if (props.contentCenter) {
    return "center";
  }
  if (props.jcStart) {
    return "flex-start";
  }
  if (props.jcCenter) {
    return "center";
  }
  if (props.jcEnd) {
    return "flex-end";
  }
  if (props.jcAround) {
    return "space-around";
  }
  if (props.jcBetween) {
    return "space-between";
  }
  return undefined;
};

export const getStyle = (
  props: StyledProps,
  colors: typeof DEFAULT_COLOR
): any => [
  {
    flex: props.flex1 ? 1 : undefined,
    flexDirection: props.flexRow ? "row" : undefined,
    flexWrap: props.flexWrap ? "wrap" : undefined,
    overflow: props.hidden ? "hidden" : undefined,
    position: props.absolute ? "absolute" : undefined,
    backgroundColor: props.bgColor,
    //
    zIndex: props.zIndex,
    opacity: props.opacity,
    //
    width: props.size || props.width,
    height: props.size || props.height,
    //
    borderWidth: props.borderWidth,
    borderRadius: props.borderRadius,
    borderColor: props.borderColor,
    //
    alignSelf: getASStyle(props),
    alignItems: getATStyle(props),
    justifyContent: getJCStyle(props),
    //
    top: props.t,
    bottom: props.b,
    left: props.l,
    right: props.r,
    margin: props.m,
    marginTop: props.mt,
    marginBottom: props.mb,
    marginLeft: props.ml,
    marginRight: props.mr,
    marginVertical: props.mv,
    marginHorizontal: props.mh,
    padding: props.p,
    paddingTop: props.pt,
    paddingBottom: props.pb,
    paddingLeft: props.pl,
    paddingRight: props.pr,
    paddingVertical: props.pv,
    paddingHorizontal: props.ph,
  },
  props.shadow
    ? {
        shadowOffset: {
          width: 0,
          height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
        zIndex: props.zIndex || 1,
        shadowColor: colors.black,
        backgroundColor: props.bgColor || colors.white,
      }
    : {},
  props.absoluteFill
    ? {
        position: "absolute",
        top: props.t || 0,
        bottom: props.b || 0,
        left: props.l || 0,
        right: props.r || 0,
      }
    : {},
  props.style,
];

export const Styled = (props: StyledProps) => {
  const colors = useColors();

  return typeof props.children === "function"
    ? props.children(getStyle(props, colors))
    : props.children;
};