/* eslint-disable no-underscore-dangle */
import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { StyleSheet } from "react-native";
import { Layout, Text, useTheme, Button, List } from "@ui-kitten/components";
import { useModel } from "flooks";
import { Input, Div } from "react-native-magnus";
import { useFocusEffect } from "@react-navigation/native";
import ActionButton from "react-native-action-button";
import EmptyComponent from "../components/EmptyComponent";
import NavHeaderBar from "../components/NavHeaderBar";

const styles = StyleSheet.create({
  all: {
    backgroundColor: "#fff",
    flex: 1,
  },
  lay: {
    backgroundColor: "#fff",
  },
  padBot: {
    paddingBottom: 100,
  },
  list: {
    paddingVertical: 10,
    paddingHorizontal: 15,
    backgroundColor: "transparent",
    flex: 1,
  },
  item: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 10,
  },
  input: {
    marginHorizontal: 5,
    minWidth: 49,
  },
  text: {
    flex: 1,
  },
  flexRow: {
    flexDirection: "row",
    alignItems: "center",
  },
  buttonlast: {
    marginLeft: 10,
  },
  button: {
    alignSelf: "flex-start",
  },
});

export default function FullReduction() {
  const theme = useTheme();
  const { changeBackground } = useModel("barModel", true);
  const { mid } = useModel("userModel");
  const { httpGet, httpPost } = useModel("httpModel", true);
  const { success, warnning } = useModel("loadingModel", true);
  const { showDialog } = useModel("dialogModel");

  const {
    userTitle21,
    fullReduction2,
    fullReduction1,
    delText,
    editText,
    confirm,
    cancel,
    successText,
    removeTips,
  } = useModel("wordsModel");
  const [fullReductions, changeFllReduction] = React.useState([
    { fullAmount: "", minusAmount: "" },
  ]);
  useFocusEffect(
    React.useCallback(() => {
      changeBackground(theme["color-primary-500"]);

      httpGet("/fullReduction/my").then(res => {
        if (res.length > 0) {
          changeFllReduction(
            res.map(item => {
              return { ...item, edit: false };
            })
          );
        }
      });
    }, [])
  );

  const editInfo = (info, index) => {
    const _fullReductions = [...fullReductions];
    info.edit = true;
    _fullReductions[index] = info;
    changeFllReduction(_fullReductions);
  };
  const delInfo = (info, index) => {
    showDialog({
      bodyText: removeTips,
      status: "danger",
      cancelable: true,
      confirmCallback: () => {
        httpPost(`/fullReduction/del/${info.id}`)
          .then(() => {
            success(successText);
            const _fullReductions = [...fullReductions];
            _fullReductions.splice(index, 1);
            changeFllReduction(_fullReductions);
          })
          .catch(e => {
            warnning(e.error);
          });
      },
    });
  };
  const cancelInfo = (info, index) => {
    const _fullReductions = [...fullReductions];
    if (info.id) {
      info.edit = false;
      _fullReductions[index] = info;
    } else {
      _fullReductions.pop();
    }

    changeFllReduction(_fullReductions);
  };
  const saveInfo = (info, index) => {
    httpPost(
      "/fullReduction/save",
      {
        ...info,
        merchantId: mid,
      },
      {
        body: "json",
      }
    )
      .then(res => {
        success(successText);
        const _fullReductions = [...fullReductions];
        _fullReductions.splice(index, 1, {
          ...res,
          edit: false,
        });
        changeFllReduction(_fullReductions);
      })
      .catch(e => {
        warnning(e.error);
      });
  };
  function changeText(value, index, type) {
    const _fullReductions = [...fullReductions];
    const info = _fullReductions[index];
    if (type === "full") {
      info.fullAmount = value;
    } else {
      info.minusAmount = value;
    }
    _fullReductions.splice(index, 1, info);
    changeFllReduction(_fullReductions);
  }
  const addFullReduction = () => {
    const _fullReductions = [...fullReductions];
    const last = _fullReductions[_fullReductions.length - 1] || {};
    if (_fullReductions.length === 0 || last.id) {
      _fullReductions.push({
        fullAmount: "",
        minusAmount: "",
      });
      changeFllReduction(_fullReductions);
    }
  };

  const saveItem = (info, index) => (
    <Layout style={styles.item}>
      <Text style={styles.text}>
        {fullReduction1}
        {info.fullAmount}
        {fullReduction2}
        {info.minusAmount}
      </Text>

      <Button
        size="small"
        appearance="outline"
        onPress={() => editInfo(info, index)}
      >
        {editText}
      </Button>
      <Button
        size="small"
        status="danger"
        style={styles.buttonlast}
        onPress={() => delInfo(info, index)}
      >
        {delText}
      </Button>
    </Layout>
  );

  const editItem = (info, index) => (
    <Layout style={styles.item}>
      <Layout style={[styles.text, styles.flexRow]}>
        <Text>{fullReduction1}</Text>
        <Input
          keyboardType="numeric"
          flex={1}
          py={3}
          mx={5}
          value={info.fullAmount.toString()}
          onChangeText={value => changeText(value, index, "full")}
        />

        <Text>{fullReduction2}</Text>
        <Input
          py={3}
          keyboardType="numeric"
          flex={1}
          mx={5}
          value={info.minusAmount.toString()}
          onChangeText={value => changeText(value, index, "minus")}
        />
      </Layout>

      <Button
        size="small"
        disabled={!info.minusAmount || !info.fullAmount}
        onPress={() => saveInfo(info, index)}
      >
        {confirm}
      </Button>

      <Button
        size="small"
        appearance="outline"
        style={styles.buttonlast}
        onPress={() => cancelInfo(info, index)}
      >
        {cancel}
      </Button>
    </Layout>
  );

  const renderItem = ({ item, index }) => {
    if (!item.id || item.edit) {
      return editItem(item, index);
    }
    return saveItem(item, index);
  };

  return (
    <>
      <Div bg="white" flex={1}>
        <NavHeaderBar title={userTitle21} />
        <List
          ListHeaderComponent={() => {
            return <Div h={50} />;
          }}
          style={styles.list}
          data={fullReductions}
          renderItem={renderItem}
          ListEmptyComponent={EmptyComponent}
        />
        <ActionButton
          buttonColor={theme["color-primary-500"]}
          onPress={addFullReduction}
          position="left"
        />
      </Div>
    </>
  );
}