import React, { useState, useEffect } from 'react'
import { Animated, View, Text, StyleSheet, TouchableWithoutFeedback, StyleProp, ViewStyle, ScrollView } from 'react-native';
import Overlay from '../Overlay'
import Button from '../Button'
import { DialogType } from "./types"
export interface Props extends DialogType {
  show: boolean,
  onChange: (value: any) => void,//todo 先用any吧
}
const Dialog = ({
  show,
  zIndex,
  children,
  style,
  title,
  width = 360,
  message,
  messageAlign = "center",
  showConfirmButton = true,
  showCancelButton = true,
  confirmButtonText = "确认",
  confirmButtonColor = "#ee0a24",
  cancelButtonText = "取消",
  cancelButtonColor = "#333333",
  fontSizeButtonText = 16,
  overlay = true,
  closeOnClickOverlay = true,
  customButton,
  customTitle,
  ...rest }: Props) => {
  const changeStatus = () => {
    rest.id ? rest.onChange(rest.id) : rest.onChange(false)
  }
  const cancel = () => {
    rest.cancel && rest.cancel()
    changeStatus()
  }
  const confirm = () => {
    rest.confirm && rest.confirm()
    changeStatus()
  }
  return (
    <Overlay
      show={show}
      style={[rest.overlayStyle, !overlay && { backgroundColor: '', }]}
      onChange={() => closeOnClickOverlay && changeStatus()}
      zIndex={zIndex}
    >
      <TouchableWithoutFeedback>
        <Animated.View>
          <View style={StyleSheet.flatten([styles.dialog, { width: width }, style])}>
            {customTitle ? customTitle() : title && <Text style={styles.title}>{title}</Text>}
            {/* 内容 */}
            {children ?
              children
              :
              <View style={styles.content}>
                <Text style={StyleSheet.flatten([styles.content_text, { textAlign: messageAlign }])}>{typeof message === "string" ? message : message()}</Text>
              </View>}
            {/* 按钮 */}
            {!customButton && <View style={styles.dialog_confirm_button}>
              {showCancelButton &&
                <Button
                  onPress={cancel}
                  textStyle={{ fontSize: fontSizeButtonText, color: cancelButtonColor }}
                  style={StyleSheet.flatten([{ width: showConfirmButton ? width / 2 : width, borderWidth: 0 }])}
                >
                  {cancelButtonText}
                </Button>}
              {showConfirmButton &&
                <Button
                  onPress={confirm}
                  textStyle={{ fontSize: fontSizeButtonText, color: confirmButtonColor }}
                  style={StyleSheet.flatten([{ width: showCancelButton ? width / 2 : width, borderWidth: 0 }])}
                >
                  {confirmButtonText}
                </Button>}
            </View>}
            {/* 自定义按钮组件 */}
            {customButton && customButton()}
          </View>
        </Animated.View>
      </TouchableWithoutFeedback>
    </Overlay>
  )
}
const styles = StyleSheet.create({
  dialog: {
    borderRadius: 10,
    backgroundColor: "#ffffff",
    paddingTop: 24,
    overflow: "hidden"
  },
  title: {
    fontSize: 18,
    width: "100%",
    textAlign: 'center',
    fontWeight: '600',
    paddingLeft: 16,
    paddingRight: 16,
  },
  content: {
    width: "100%",
    marginTop: 16,
    marginBottom: 16,
    paddingLeft: 16,
    paddingRight: 16,
  },
  content_text: {
    fontSize: 16,
    textAlign: 'center',
  },
  dialog_confirm_button: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: "center",
  }
})
export default Dialog