import { createStyles, fontFamily } from "~/theme";

export default createStyles(({ wp, hp, scaleText, theme: { colors } }) => ({
  scrollView: {
    flex: 1,
  },
  container: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    marginTop: 10,
    paddingBottom: 40,
  },
  containerNav: {
    display: "flex",
    flexDirection: "row",
    marginHorizontal: 8,
    marginBottom: 8,
  },
  containerActions: {
    display: "flex",
    flexDirection: "column",
    paddingHorizontal: 8,
    marginBottom: 8,
    width: "100%",
  },
  headContainerInfos: {
    paddingHorizontal: 12,
    marginBottom: 10,
    marginTop: 4,
    width: "100%",
  },
  actionContainer: {
    marginBottom: 8,
  },
  actionButton: {
    borderRadius: 8,
    backgroundColor: colors.primary,
  },
  actionText: {
    fontSize: 16,
    color: colors.onPrimary,
  },
  actionIcon: {
    color: colors.onPrimary,
    fontSize: 20,
  },
  actionCloseButton: {
    backgroundColor: colors.blue,
  },
  actionCloseText: {},
  actionCloseIcon: {},
  actionReopenButton: {
    backgroundColor: colors.blue,
  },
  actionReopenText: {},
  actionReopenIcon: {},
  actionKeepOpenButton: {
    backgroundColor: colors.blue,
  },
  actionKeepOpenText: {},
  actionKeepOpenIcon: {},
  actionNotifyAroundButton: {},
  actionNotifyAroundText: {},
  actionNotifyAroundIcon: {},
  actionNotifyRelativesButton: {},
  actionNotifyRelativesText: {},
  actionNotifyRelativesIcon: {},
  actionComingHelpButton: {},
  actionComingHelpText: {},
  actionComingHelpIcon: {},
  actionShowDefibsButton: {
    backgroundColor: colors.blue,
  },
  actionShowDefibsText: {},
  actionShowDefibsIcon: {},
  actionSmsButton: {},
  actionSmsText: {},
  actionSmsIcon: {},
  actionSmsInfoTip: {
    marginTop: 10,
    marginHorizontal: 5,
  },
  actionSmsInfoTipText: {
    color: colors.onBackground,
  },
  containerInfos: {
    marginHorizontal: 8,
    backgroundColor: colors.surface,
    borderRadius: 5,
  },
  containerFields: {
    marginVertical: 25,
    paddingHorizontal: 8,
    width: "100%",
  },
  linkBox: {
    display: "flex",
    flexDirection: "column",
    flex: 1,
    aspectRatio: 1,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 8,
    borderColor: colors.grey,
    borderWidth: 1,
    backgroundColor: colors.surface,
    overflow: "hidden",
  },
  linkBoxButton: {
    flex: 1,
    aspectRatio: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  linkBoxButtonContent: {
    flex: 1,
    aspectRatio: 1,
    alignItems: "center",
    justifyContent: "flex-end",
  },
  linkBoxButtonText: {
    color: colors.primary,
    fontSize: 18,
    textAlign: "center",
    textShadowColor: colors.surface,
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 1,
  },
  messageCounterText: {
    fontSize: 14,
    fontWeight: "bold",
    color: colors.blue,
    textAlign: "center",
    marginLeft: 2,
    position: "relative",
    top: -2,
  },
  linkBoxButtonIcon: {
    color: colors.primary,
    textShadowColor: colors.surface,
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 1,
  },
  linkToMessages: {
    marginRight: 4,
  },
  linkToMap: {
    marginLeft: 4,
  },
  title: {
    marginTop: 10,
    paddingVertical: 10,
    fontSize: 18,
    fontWeight: "bold",
    fontFamily,
    lineHeight: 18,
    textAlign: "center",
  },
  locationSectionTitle: {
    backgroundColor: colors.background,
    paddingVertical: 8,
    paddingHorizontal: 10,
    marginTop: 5,
  },
  locationTitle: {
    fontSize: 16,
    fontWeight: "bold",
    color: colors.primary,
  },
  locationSeparator: {
    marginTop: 15,
    borderTopWidth: 5,
    borderColor: colors.background,
  },
}));