import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { Image, StyleSheet } from "react-native";
import { Layout, Text, useTheme, Button } from "@ui-kitten/components";
import { useFocusEffect } from "@react-navigation/native";
import { useModel } from "flooks";
import ScrollPage from "../components/ScrollPage";
import NavHeaderBar from "../components/NavHeaderBar";
import UpLoadImage from "../components/UpLoadImage";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingBottom: 33,
  },
  icon: {
    width: 90,
    height: 80,
    marginBottom: 26,
  },
  text: {
    fontWeight: "500",
    marginBottom: 7,
  },
  top: {
    paddingVertical: 7,
    height: 114,
    backgroundColor: "#eee",
    alignSelf: "stretch",
    alignItems: "center",
    justifyContent: "center",
  },
  banner: {
    flex: 1,
    alignSelf: "stretch",
  },
  logo: {
    width: 50,
    height: 50,
    borderRadius: 3,
  },
  remove: {
    position: "absolute",
    bottom: 10,
    right: 10,
  },
  upload: {
    marginTop: 21,
    alignSelf: "center",
  },
  main: {
    paddingHorizontal: 24,
    paddingVertical: 14,
  },
  button: {
    alignSelf: "center",
    marginTop: 19,
  },
  title: {
    flexDirection: "row",
    alignItems: "center",
  },
});

export default function EditBannerScreen({ route }) {
  const theme = useTheme();
  const { changeBackground } = useModel("barModel");
  const {
    banner,
    logo,
    qualification,
    uploadStoreImg,
    registerInfo,
  } = useModel("userModel");
  const [img, changeImg] = React.useState("");
  const [type, setType] = React.useState("banner");
  const { showDialog } = useModel("dialogModel");
  const { loading, success } = useModel("loadingModel");
  const {
    bannerTitle,
    logoTitle,
    qualificationTitle,
    remove,
    editText,
    uplaodText,
    uplaodImg,
    removeTips,
    FPMPMG,
    successText,
  } = useModel("wordsModel");
  useFocusEffect(
    React.useCallback(() => {
      changeBackground(theme["color-primary-500"]);
      if (route.params.type) {
        setType(route.params.type);
      }
    }, [])
  );

  return (
    <>
      <NavHeaderBar
        title={
          editText +
          (type === "banner"
            ? bannerTitle
            : type === "qualification"
            ? qualificationTitle
            : logoTitle)
        }
      />
      <ScrollPage>
        <Layout style={styles.container}>
          <Layout style={styles.top}>
            <Image
              source={{
                uri:
                  type === "banner"
                    ? banner
                    : type === "qualification"
                    ? qualification || registerInfo.qualification
                    : logo,
              }}
              style={[type === "logo" ? styles.logo : styles.banner]}
            />
            <Button
              style={styles.remove}
              size="tiny"
              status="danger"
              onPress={() => {
                showDialog({
                  bodyText: removeTips,
                  status: "danger",
                  cancelable: true,
                  confirmCallback: () => {
                    uploadStoreImg("", type);
                  },
                });
              }}
            >
              {remove}
            </Button>
          </Layout>
          <Layout style={styles.main}>
            <Layout style={styles.title}>
              <Text category="s1">
                {uplaodText +
                  (type === "banner"
                    ? bannerTitle
                    : type === "qualification"
                    ? qualificationTitle
                    : logoTitle)}
              </Text>
              {type === "banner" && (
                <Text category="h1" status="info" style={{ paddingLeft: 10 }}>
                  建议尺寸：720*240
                </Text>
              )}
            </Layout>
            <UpLoadImage
              style={styles.upload}
              value={img}
              changeIcon={changeImg}
              aspect={type === "banner" ? [3, 1] : [1, 1]}
              size={type === "banner" ? 240 : 133}
            />

            <Button
              disabled={!img}
              style={styles.button}
              onPress={() => {
                loading();
                uploadStoreImg(img, type).then(() => {
                  changeImg("");
                  success(FPMPMG + successText);
                });
              }}
            >
              {uplaodImg}
            </Button>
          </Layout>
        </Layout>
      </ScrollPage>
    </>
  );
}