import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
import {
  toNumberWithDefault,
  toNumberWithDefaultZero,
} from "@applicaster/zapp-react-native-utils/numberUtils";
import { PluginConfiguration } from "./";
import { ItemIconProps } from "./Button/ItemIcon";
import { ItemLabelProps } from "./Button/ItemLabel";
import { ItemProps } from "./Button/Item";

export function defaultItemProps(
  config: PluginConfiguration,
  maxWidth: number,
  blockItemStyle?: Record<string, any>
): ItemProps {
  const {
    modal_bottom_sheet_item_background_color,
    modal_bottom_sheet_item_focus_background_color,
    modal_bottom_sheet_item_selected_background_color,
    modal_bottom_sheet_item_focused_selected_background_color,
    modal_bottom_sheet_item_corner_radius,
    modal_bottom_sheet_item_margin_bottom,
    modal_bottom_sheet_item_margin_left,
    modal_bottom_sheet_item_margin_right,
    modal_bottom_sheet_item_margin_top,
    modal_bottom_sheet_item_padding_bottom,
    modal_bottom_sheet_item_padding_left,
    modal_bottom_sheet_item_padding_right,
    modal_bottom_sheet_item_padding_top,
  } = config;

  const bgDefault = blockItemStyle?.background?.default;

  const bgFocused =
    blockItemStyle?.background?.focused || blockItemStyle?.background?.focus;

  return {
    backgroundColor:
      bgDefault?.backgroundColor || modal_bottom_sheet_item_background_color,
    focusedBackgroundColor:
      bgFocused?.backgroundColor ||
      modal_bottom_sheet_item_focus_background_color,
    selectedBackgroundColor: modal_bottom_sheet_item_selected_background_color,
    focusedSelectedBackgroundColor:
      modal_bottom_sheet_item_focused_selected_background_color,
    borderRadius: toNumberWithDefault(
      modal_bottom_sheet_item_corner_radius,
      bgDefault?.borderRadius
    ),
    marginBottom: modal_bottom_sheet_item_margin_bottom,
    marginTop: modal_bottom_sheet_item_margin_top,
    marginLeft: modal_bottom_sheet_item_margin_left,
    marginRight: modal_bottom_sheet_item_margin_right,
    paddingTop: toNumberWithDefault(
      modal_bottom_sheet_item_padding_top,
      bgDefault?.paddingTop
    ),
    paddingBottom: toNumberWithDefault(
      modal_bottom_sheet_item_padding_bottom,
      bgDefault?.paddingBottom
    ),
    paddingRight: modal_bottom_sheet_item_padding_right,
    paddingLeft: modal_bottom_sheet_item_padding_left,
    maxWidth,
  };
}

export function defaultItemLabelProps(
  config: PluginConfiguration,
  sheetWidth: number,
  blockItemStyle?: Record<string, any>
): ItemLabelProps {
  const {
    modal_bottom_sheet_item_label_android_letter_spacing,
    modal_bottom_sheet_item_label_ios_letter_spacing,
    modal_bottom_sheet_item_label_family_ios_font_selector,
    modal_bottom_sheet_item_label_family_android_font_selector,
    modal_bottom_sheet_item_label_focus_font_color,
    modal_bottom_sheet_item_label_font_color,
    modal_bottom_sheet_item_label_selected_font_color,
    modal_bottom_sheet_item_label_hover_selected_font_color,
    modal_bottom_sheet_item_label_font_size,
    modal_bottom_sheet_item_label_line_height,
    modal_bottom_sheet_item_label_margin_bottom,
    modal_bottom_sheet_item_label_margin_top,
    modal_bottom_sheet_item_label_margin_left,
    modal_bottom_sheet_item_label_margin_right,
    modal_bottom_sheet_item_label_transform,
    modal_bottom_sheet_item_icon_width,
    modal_bottom_sheet_item_icon_margin_left,
    modal_bottom_sheet_item_icon_margin_right,
    modal_bottom_sheet_item_margin_left,
    modal_bottom_sheet_item_margin_right,
    modal_bottom_sheet_item_padding_left,
    modal_bottom_sheet_item_padding_right,
  } = config;

  const iconWidth = toNumberWithDefaultZero(modal_bottom_sheet_item_icon_width);

  const iconMarginLeft = toNumberWithDefaultZero(
    modal_bottom_sheet_item_icon_margin_left
  );

  const iconMarginRight = toNumberWithDefaultZero(
    modal_bottom_sheet_item_icon_margin_right
  );

  const itemMarginLeft = toNumberWithDefaultZero(
    modal_bottom_sheet_item_margin_left
  );

  const itemMarginRight = toNumberWithDefaultZero(
    modal_bottom_sheet_item_margin_right
  );

  const itemPaddingLeft = toNumberWithDefaultZero(
    modal_bottom_sheet_item_padding_left
  );

  const itemPaddingRight = toNumberWithDefaultZero(
    modal_bottom_sheet_item_padding_right
  );

  const calculatedMaxWidth =
    sheetWidth -
    (iconWidth +
      iconMarginLeft +
      iconMarginRight +
      itemMarginLeft +
      itemMarginRight +
      itemPaddingLeft +
      itemPaddingRight);

  const maxWidth =
    Number.isNaN(calculatedMaxWidth) || calculatedMaxWidth <= 0
      ? sheetWidth
      : calculatedMaxWidth;

  const label1Default = blockItemStyle?.textLabel1?.default;

  return {
    fontFamily: platformSelect({
      ios: modal_bottom_sheet_item_label_family_ios_font_selector,
      android: modal_bottom_sheet_item_label_family_android_font_selector,
    }),
    letterSpacing: platformSelect({
      ios: modal_bottom_sheet_item_label_ios_letter_spacing,
      android: modal_bottom_sheet_item_label_android_letter_spacing,
    }),
    fontSize: toNumberWithDefault(
      modal_bottom_sheet_item_label_font_size,
      label1Default?.fontSize
    ),
    color: label1Default?.fontColor || modal_bottom_sheet_item_label_font_color,
    focusColor: modal_bottom_sheet_item_label_focus_font_color,
    hoverSelectedColor: modal_bottom_sheet_item_label_hover_selected_font_color,
    selectedColor: modal_bottom_sheet_item_label_selected_font_color,
    lineHeight: modal_bottom_sheet_item_label_line_height,
    marginBottom: modal_bottom_sheet_item_label_margin_bottom,
    marginTop: modal_bottom_sheet_item_label_margin_top,
    marginLeft: modal_bottom_sheet_item_label_margin_left,
    marginRight: modal_bottom_sheet_item_label_margin_right,
    transform: modal_bottom_sheet_item_label_transform,
    maxWidth,
  };
}

export function defaultItemIconProps(
  config: PluginConfiguration
): ItemIconProps {
  const {
    modal_bottom_sheet_item_icon_height,
    modal_bottom_sheet_item_icon_width,
    modal_bottom_sheet_item_icon_margin_bottom,
    modal_bottom_sheet_item_icon_margin_left,
    modal_bottom_sheet_item_icon_margin_right,
    modal_bottom_sheet_item_icon_margin_top,
    modal_bottom_sheet_item_icon_flavour,
  } = config;

  return {
    width: modal_bottom_sheet_item_icon_width,
    height: modal_bottom_sheet_item_icon_height,
    flavour: modal_bottom_sheet_item_icon_flavour,
    marginTop: modal_bottom_sheet_item_icon_margin_top,
    marginBottom: modal_bottom_sheet_item_icon_margin_bottom,
    marginLeft: modal_bottom_sheet_item_icon_margin_left,
    marginRight: modal_bottom_sheet_item_icon_margin_right,
  };
}

export function getItemIconProps(
  theme: PluginConfiguration,
  iconProps?: ((theme: PluginConfiguration) => ItemIconProps) | ItemIconProps
) {
  if (iconProps) {
    return typeof iconProps === "function" ? iconProps(theme) : iconProps;
  }

  return defaultItemIconProps(theme);
}

export function getItemLabelProps(
  theme: PluginConfiguration,
  width: number,
  labelProps?:
    | ((theme: PluginConfiguration, width: number) => ItemLabelProps)
    | ItemLabelProps,
  blockItemStyle?: Record<string, any>
) {
  if (labelProps) {
    return typeof labelProps === "function"
      ? labelProps(theme, width)
      : labelProps;
  }

  return defaultItemLabelProps(theme, width, blockItemStyle);
}

export function getItemProps(
  theme: PluginConfiguration,
  width: number,
  itemProps?:
    | ((theme: PluginConfiguration, width: number) => ItemProps)
    | ItemProps,
  blockItemStyle?: Record<string, any>
) {
  if (itemProps) {
    return typeof itemProps === "function"
      ? itemProps(theme, width)
      : itemProps;
  }

  return defaultItemProps(theme, width, blockItemStyle);
}