import { StyleSheet, Platform } from "react-native";
import {
  responsiveHeight,
  responsiveWidth,
} from "../actions/responsiveSizes.js";

import { Fonts, Palette } from "./index";

import { isDesktop, isWeb } from "../hooks/useLayoutType.js";

export const mainBorderRadius = 10;

export const gutterConstant = 5.33;
export const gutters = isDesktop ? 30 : responsiveWidth(gutterConstant);

export const defaultItemHeight = 40;
export const defaultBlurIntensity = 50;

export const bubbleStyle = ({ isCurrentUser, customStyle = {} }) => ({
  padding: gutters / 2,
  backgroundColor: isCurrentUser ? Palette.transparentPrimary : "transparent",
  borderRadius: mainBorderRadius / 2,
  width: "80%",
  maxWidth: 250,
  minWidth: 50,
  ...(isCurrentUser
    ? { borderBottomRightRadius: 0 }
    : {
        borderColor: Palette.primary,
        borderWidth: 1,
        borderBottomLeftRadius: 0,
      }),
  ...customStyle,
});

export const size = ({ size }) => ({
  width: size,
  height: size,
});

const containerRow = {
  flexDirection: "row",
  alignItems: "center",
};

const containerCenter = {
  alignItems: "center",
  justifyContent: "center",
};

const containerSpaceBetween = {
  ...containerRow,
  justifyContent: "space-between",
};

const containerRevertGutter = {
  marginHorizontal: responsiveWidth(-gutterConstant),
  paddingHorizontal: gutters,
};

const containerCheckBox = {
  height: 25,
  width: 25,
  borderRadius: 4,
  borderColor: Palette.darkPurple,
  borderWidth: 1,
};

const shadows = {
  shadowColor: "#4C3E73",

  shadowOpacity: 0.8,
  shadowRadius: 60,

  elevation: 5,
};

const defaultShadows = {
  ...shadows,
  shadowOffset: {
    width: 0,
    height: Platform.OS !== "ios" ? 0 : 10,
  },
};

const blackShadows = {
  ...defaultShadows,
  shadowColor: Palette.black,
  shadowOpacity: 0.15,
};

const pinkShadows = {
  ...defaultShadows,
  shadowColor: Palette.primary,
  shadowOpacity: 0.8,
};

const radioactivGlow = {
  ...defaultShadows,
  shadowRadius: 10,
  shadowOffset: {
    width: 0,
    height: 0,
  },
  shadowColor: Palette.radioactivGreen,
  shadowOpacity: 0.8,
};

const reverseShadows = {
  ...shadows,
  shadowOffset: {
    width: 0,
    height: -10,
  },
};

const defaultBorder = {
  borderStyle: "solid",
  borderWidth: 1,
  borderColor: Palette.ultraLightWhite,
};

const actionSheet = {
  containerStyle: {
    backgroundColor: Palette.primary,
    width: "40%",
    minWidth: responsiveWidth(60),
    maxWidth: 500,
    alignSelf: "center",
    borderRadius: 20,
    marginBottom: 50,
  },
  textStyle: {
    ...Fonts({
      type: "navigationTitle",
      style: { color: Palette.white, textAlign: "center" },
    }),
  },
  showSeparators: true,
  separatorStyle: {
    backgroundColor: Palette.transparentWhite,
    height: 1,
    alignItems: "center",
  },
  destructiveColor: Palette.red,
};

export default StyleSheet.create({
  containerRow,
  containerCenter,
  containerSpaceBetween,
  containerRevertGutter,

  defaultShadows,
  reverseShadows,
  blackShadows,
  pinkShadows,

  radioactivGlow,

  defaultBorder,
  dashedBorder: {
    ...defaultBorder,
    borderStyle: "dashed",
    borderColor: Palette.primary,
  },
  primaryBorder: {
    ...defaultBorder,
    borderColor: Palette.primary,
  },

  containerMain: {
    flex: 1,
    backgroundColor: Palette.darkPurple,
    padding: gutters,
    paddingBottom: 0,
  },

  containerItem: {
    padding: gutters / 2,
    backgroundColor: Palette.lightPurple,
    borderRadius: mainBorderRadius,
  },

  containerDefaultShadow: {
    ...defaultShadows,
    padding: gutters,
    width: "100%",
    backgroundColor: "white",
    marginBottom: responsiveHeight(2),
    borderRadius: mainBorderRadius,
  },

  containerItemPicture: {
    width: "100%",
    height: responsiveHeight(20),
    ...defaultShadows,
  },

  containerModal: {
    width: "60%",
    maxWidth: 450,
    minWidth: 300,
    padding: "2.5%",
    backgroundColor: Palette.darkPurple,
    borderRadius: mainBorderRadius,
    ...containerCenter,
  },

  containerBottomSheet: {
    flex: 1,
    padding: gutters,
    paddingBottom: isWeb ? gutters : 3 * gutters,
    backgroundColor: Palette.darkPurple,
  },

  itemPicture: {
    overflow: "hidden",
    borderRadius: mainBorderRadius,
  },

  containerInput: {
    height: 50,
    backgroundColor: "white",
    borderColor: Palette.white,
    borderWidth: 1,
    borderRadius: mainBorderRadius,
    padding: 15,
  },
  containerContentScrollView: {
    paddingTop: responsiveHeight(3),
    paddingBottom: responsiveHeight(15),
    paddingHorizontal: gutters,
  },
  containerRound: {
    ...containerCenter,
    backgroundColor: Palette.white,
    width: 40,
    height: 40,
    borderRadius: 500,
    overflow: "hidden",
  },
  containerAbsoluteBottom: {
    ...containerSpaceBetween,
    position: "absolute",
    bottom: 0,
    right: 0,
    left: 0,
    backgroundColor: Palette.primary,
    paddingHorizontal: gutters,
    paddingVertical: 25,
  },
  containerActionSheet: {
    paddingHorizontal: gutters,
    borderTopRightRadius: 0,
    borderTopLeftRadius: 0,
  },
  containerLightBorder: {
    ...defaultBorder,
    flex: 1,
    width: "50%",
    borderRightWidth: 0,
    padding: "5%",
    paddingRight: 0,
  },

  // Items
  itemImageAvatar: {
    width: 40,
    height: 40,
    borderRadius: 150,
    overflow: "hidden",
  },

  // Icon
  containerIcon: {
    ...containerCenter,
    borderRadius: mainBorderRadius,
    width: 30,
    height: 30,
    backgroundColor: Palette.primary,
  },

  iconSuperSmall: { width: 10, height: 10 },
  iconSmall: { width: 15, height: 15 },
  iconDefault: { width: 20, height: 20 },
  iconLarge: { width: 30, height: 30 },

  iconContainerRound: { width: "50%", height: "50%" },

  // Badge
  itemBadge: {
    position: "absolute",
    top: -5,
    right: -5,
    backgroundColor: Palette.primary,
    borderRadius: 150,
    width: 10,
    height: 10,
  },

  // Separators
  separatorVertical: {
    width: 1,
    height: 30,
    marginHorizontal: 10,
    backgroundColor: Palette.ultraLightWhite,
  },

  separatorHorizontal: {
    width: "100%",
    height: 1,
    marginVertical: 10,
    backgroundColor: Palette.ultraLightWhite,
  },

  separatorHorizontalLarge: {
    height: 10,
    marginVertical: responsiveHeight(2),
    backgroundColor: Palette.ultraLightWhite,
  },

  // Hitslop
  mainHitSlop: { top: 20, right: 20, left: 20, bottom: 20 },
  extremeHitSlop: { top: 30, right: 30, left: 30, bottom: 30 },

  // Misc UI

  containerRadio: {
    ...containerCenter,
    ...containerCheckBox,
    borderColor: Palette.white,
    borderRadius: 150,
  },

  circleRadio: {
    width: "50%",
    height: "50%",
    borderRadius: 150,
    backgroundColor: Palette.primary,
  },

  containerCheckBox: {
    ...containerCenter,
    ...containerCheckBox,
  },

  squareCheckBox: {
    width: "50%",
    height: "50%",
    borderRadius: 2,
    backgroundColor: Palette.primary,
  },

  actionSheet,

  // Transform
  mirrorHorizontal: {
    transform: [{ scaleX: -1 }],
  },
});
