import React, { useMemo } from "react";
import { LayoutChangeEvent, StyleSheet, View } from "react-native";
import { Title, TitleProps } from "./Title";
import { CloseButton, CloseButtonProps } from "./CloseButton";
import { getCloseButtonProps, getTitleProps } from "./utils";
import { PluginConfiguration } from "../index";
import { useModalBlocksStyle } from "../ModalBlocksStyleContext";

type Props = {
  dismiss: () => void;
  configuration: PluginConfiguration;
  onLayout?: (event: LayoutChangeEvent) => void;
  summary?: string;
  title?: string;
};

const styles = StyleSheet.create({
  noFlex: {
    flex: 0,
  },
  flex: {
    flex: 1,
  },
  container: {
    flexDirection: "row",
    alignItems: "center",
  },
});

export function ModalHeader(props: Props) {
  const { configuration, dismiss, onLayout, summary, title } = props;
  const modalBlocksStyle = useModalBlocksStyle();
  const headerBlock = modalBlocksStyle?.header;

  const containerStyle = useMemo(() => {
    const bg = headerBlock?.container?.default?.backgroundColor;

    return [styles.container, bg ? { backgroundColor: bg } : null];
  }, [headerBlock?.container?.default?.backgroundColor]);

  const closeButtonProps = useMemo<CloseButtonProps>(
    () => ({
      ...getCloseButtonProps(configuration),
      close: dismiss,
    }),
    [configuration, dismiss]
  );

  const titleProps = useMemo<TitleProps>(() => {
    const baseProps = getTitleProps(configuration, "title");
    const titleOverride = headerBlock?.title?.default;

    return {
      ...baseProps,
      text: title,
      ...(titleOverride?.fontColor ? { color: titleOverride.fontColor } : {}),
      ...(titleOverride?.fontSize ? { fontSize: titleOverride.fontSize } : {}),
    };
  }, [configuration, title, headerBlock?.title?.default]);

  const summaryProps = useMemo<TitleProps>(
    () => ({
      ...getTitleProps(configuration, "summary"),
      text: summary,
    }),
    [configuration, summary]
  );

  const buttonsContainerWidth =
    configuration.modal_bottom_sheet_close_width +
    configuration.modal_bottom_sheet_close_margin_left +
    configuration.modal_bottom_sheet_close_margin_right;

  return (
    <View onLayout={onLayout} style={containerStyle}>
      <View style={styles.flex}>
        {title ? <Title {...titleProps} /> : null}
        {summary ? <Title {...summaryProps} /> : null}
      </View>
      <View style={[styles.noFlex, { width: buttonsContainerWidth }]}>
        <CloseButton {...closeButtonProps} />
      </View>
    </View>
  );
}