import React from 'react';
import { StyleSheet, View } from 'react-native';
import ShouldRender from '../ShouldRender';
import { ModalProps, TextButtonProps } from './interface';
import TextButton from './TextButton';
import { joinElement } from './utils';
import Button from '../Button';
import { Fill } from '../Button/enum';
import createStyle from './styles/modal-footer.style';
import { useTheme } from '../Theme/Theme';
import { AutoLayout } from '../AutoLayout';

export interface ModalFooterProps
  extends Pick<
    ModalProps,
    | 'showConfirmButton'
    | 'showCancelButton'
    | 'actions'
    | 'solidButton'
    | 'buttonsDirection'
  > {
  confirmButtonProps: TextButtonProps;
  cancelButtonProps: TextButtonProps;
}

const ModalFooter: React.FC<ModalFooterProps> = ({
  showConfirmButton,
  confirmButtonProps,
  showCancelButton,
  cancelButtonProps,
  actions,
  solidButton,
  buttonsDirection,
}) => {
  const defaultButtonProps = [
    showCancelButton && cancelButtonProps,
    showConfirmButton && confirmButtonProps,
  ].filter(Boolean) as TextButtonProps[];
  const token = useTheme();
  const styles = createStyle(token);

  const getFooterStyle = () => {
    if (solidButton) {
      return styles.solidButtonFooter;
    }
    return !actions ? styles.footerHorizontal : styles.footerVertical;
  };

  return (
    <View style={StyleSheet.flatten([getFooterStyle()])}>
      {/* 横向文本按钮 */}
      <ShouldRender condition={!actions && !solidButton}>
        {joinElement(
          defaultButtonProps
            .map(({ style, ...restButtonProps }) => ({
              style: StyleSheet.flatten([styles.buttonHorizontal, style]),
              ...restButtonProps,
            }))
            .map((props) => <TextButton key={props.key} {...props} />),
          <View style={styles.dividerVertical} />
        )}
      </ShouldRender>

      {/* 多按钮 */}
      <ShouldRender condition={!!actions}>
        {actions?.map(({ key, text, style, ...buttonProps }, index) => {
          return !solidButton ? (
            <View key={key}>
              <View style={styles.dividerHorizontal} />
              <TextButton style={style} {...buttonProps} text={text} />
            </View>
          ) : (
            <Button
              key={key}
              fill={key === 'confirm' ? Fill.solid : Fill.weak}
              style={StyleSheet.flatten([
                index > 0 && styles.solidButtonVerticalSpace,
                style,
              ])}
              {...buttonProps}
            >
              {text}
            </Button>
          );
        })}
      </ShouldRender>

      <ShouldRender condition={!!solidButton}>
        <AutoLayout
          components={[
            showCancelButton ? (
              <Button fill={Fill.weak} {...cancelButtonProps}>
                {cancelButtonProps.text}
              </Button>
            ) : null,
            showConfirmButton ? (
              <Button fill={Fill.solid} {...confirmButtonProps}>
                {confirmButtonProps.text}
              </Button>
            ) : null,
          ]}
          direction={buttonsDirection}
        />
      </ShouldRender>
    </View>
  );
};

export default ModalFooter;