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";

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 closeButtonProps = useMemo<CloseButtonProps>(
    () => ({
      ...getCloseButtonProps(configuration),
      close: dismiss,
    }),
    [configuration, dismiss]
  );

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

  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={styles.container}>
      <View style={styles.flex}>
        {title ? <Title {...titleProps} /> : null}
        {summary ? <Title {...summaryProps} /> : null}
      </View>
      <View style={[styles.noFlex, { width: buttonsContainerWidth }]}>
        <CloseButton {...closeButtonProps} />
      </View>
    </View>
  );
}