import React, { useContext, useEffect, useState } from "react";
import {
  Button,
  Card,
  Col,
  Row,
  Table,
  Typography,
  Tag,
  Space,
  message,
} from "antd";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { FilterOutlined, DownloadOutlined } from "@ant-design/icons";
import { format, parseISO } from "date-fns";
import { ModalLoaderContext } from "../../utils/modal";
import { useParams } from "react-router-dom";
import { MembershipModal } from "./MembershipModal";

const {Title, Text} = Typography;

export const DetailUser = observer(() => {
  const store = useStore();
  const modalLoader = useContext(ModalLoaderContext);
  const {id} = useParams();
  const [visibleModal, setVisibleModal] = useState(false);
  const [isVisibleTopUpModal, setIsVisibleTopUpModal] = useState(false);
  const [destination, setDestination] = useState(null);
  const [initialData, setInitialData] = useState({});
  const [confirmLoading, setConfirmLoading] = useState(false);

  useEffect(() => {
    (async () => {
      modalLoader.setLoading(true);
      await getData();
      await Promise.allSettled([
        store.transaction.getDataHistoryTopUp(id),
        store.membership.getDetail(id),
      ]);
      modalLoader.setLoading(false);
    })();
  }, []);

  const getData = async () => {
    store.authentication.userData.role === "Admin"
      ? await store.membership.getData()
      : await store.membership.getDataBySuperior();
  };
  const changeStatus = async (id, isActive) => {
    const status = isActive ? "inactive" : "active";
    const status2 = isActive ? "Inactivating" : "Activating";
    try {
      modalLoader.setLoading(true);
      const response = await store.membership.changeStatus(id, status);
      modalLoader.setLoading(false);

      response?.body?.statusCode === 201
        ? message.success(`Success ${status2} Membership`)
        : message.error(`Failed ${status2} Membership`);
      await getData();
    } catch (err) {
      modalLoader.setLoading(false);
      message.error(`Failed ${status2} Membership`);
    }
  };

  const onSubmit = async (data) => {
    data.superior = true;

    if (initialData.id) {
      setConfirmLoading(true);
      modalLoader.setLoading(true);
      try {
        await store.membership.update(initialData.id, data);
        message.success(
          initialData.isChangePassword
            ? "Success Change Member Password"
            : "Success Update Data Member"
        );
        await getData();
        modalLoader.setLoading(false);
      } catch (e) {
        modalLoader.setLoading(true);
        message.error(
          initialData.isChangePassword
            ? "Failed Update Member Password"
            : "Failed Update Data Member"
        );
      }
      setConfirmLoading(false);
      setVisibleModal(false);
    } else {
      setConfirmLoading(true);
      modalLoader.setLoading(true);
      try {
        await store.membership.create(data);
        message.success("Success Add New Member");
        await getData();
      } catch (e) {
        console.log(e, "apa errornya");
        message.error("Failed Add Member");
      }
      modalLoader.setLoading(false);
      setConfirmLoading(false);
      setVisibleModal(false);
      setInitialData({});
    }
  };
  const columns = [
    {
      title: "Amount",
      dataIndex: "amount",
      key: "amount",
    },
    {
      title: "Transaction Date",
      dataIndex: "transaction_date",
      key: "transaction_date",
      render: (text, record) => {
        return (
          <Text>
            {format(parseISO(record.transaction_date), "dd MMMM yyyy ")}
          </Text>
        );
      },
    },
    {
      title: "Status",
      dataIndex: "isActive",
      key: "isActive",
      render: (text, record) => (
        <Tag
          color={record?.isActive === true ? "processing" : "#E3E8EE"}
          style={{ color: "#4F566B" }}
        >
          {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
        </Tag>
      ),
    },
    {
      title: "Action",
      key: "action",
      render: (text, record) => (
        <Space size="middle">
          {/* {store.authentication.userData.role === "Admin" &&  */}
          <Button
            type={record?.isActive === true ? "danger" : "primary"}
            onClick={() => changeStatus(record?.id, record?.isActive)}
          >
            {record?.isActive === true ? "Inactive" : "Active"}
          </Button>
          {/* } */}
          {/* {store.authentication.userData.role === "Admin" &&  */}
          <Button
            onClick={() => {
              let record2 = record;
              delete record2.password;
              record2.isChangePassword = false;

              setInitialData({
                ...record2,
                // roleId: record.roles.id,
              });
              setVisibleModal(true);
            }}
          >
            Edit
          </Button>
          {/* }
              {store.authentication.userData.role === "Admin" &&  */}
          <Button
            onClick={() => {
              let record2 = record;
              delete record2.password;
              record2.isChangePassword = true;

              setInitialData({
                ...record2,
                // roleId: record.roles.id,
              });
              setVisibleModal(true);
            }}
          >
            Ganti Password
          </Button>
          {/* } */}
        </Space>
      ),
    },
  ];

  const routeData = [
    {
      route: LINKS.HOME,
      name: "Home",
    },
    {
      route: LINKS.MEMBERSHIP,
      name: <span style={{ fontWeight: "bold" }}>Keanggotaan</span>,
    },
    {
      route: LINKS.USER_DETAIL,
      name: <span style={{ fontWeight: "bold" }}>Detail User</span>,
    },
  ];
  return (
    <div className={["ppob-container"].join(" ")}>
      <BreadcumbComponent data={routeData} />
      <Card>
        <Title strong>Detail User</Title>
        <Row style={{ marginBottom: 20 }}>
          <Col lg={12} xs={24}>
            <Row>
              <Col span={12}>
                <Text strong>Name</Text>
              </Col>
              <Col span={12}>
                <Text>{store.membership.dataDetail.userDetail?.name}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Username</Text>
              </Col>
              <Col span={12}>
                <Text>{store.membership.dataDetail.superior?.username}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Role</Text>
              </Col>
              <Col span={12}>
                <Text>{store.membership.dataDetail.roles?.name}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Phone Number</Text>
              </Col>
              <Col span={12}>
                <Text>
                  {store.membership.dataDetail.userDetail?.phone_number}
                </Text>
              </Col>
              <Col span={12}>
                <Text strong>Status</Text>
              </Col>
              <Col span={12}>
                <Text>
                  {store.membership.dataDetail.isActive === true
                    ? "Aktif"
                    : "Inaktif"}
                </Text>
              </Col>
            </Row>
          </Col>
          {/* <Col lg={12} xs={24}>
            <Row justify={"center"}>
              <Col lg={24} xs={12}>
                <Title strong level={3} style={styleSaldoTitle}>
                  Saldo
                </Title>
              </Col>
              <Col lg={24} xs={12}>
                <Text style={styleSaldoContent}>
                  {store.transaction?.data.amount}
                </Text>
              </Col>
            </Row>
          </Col> */}
        </Row>
        <Row>
          <Col span={24}>
            <div>
              <Title strong level={3}>
                History Top Up
              </Title>

              {/* <Button
                style={{ marginBottom: "1rem" }}
                onClick={() => {
                  console.log("clicked filter");
                }}
              >
                <FilterOutlined />
                Filter
              </Button> */}
              <Table
                columns={columns}
                dataSource={store.transaction.dataHistoryTopUp}
                bordered
              />
            </div>
          </Col>
        </Row>
        <div />
      </Card>
      {/* <Modal
        visible={isVisibleTopUpModal}
        title="Top Up Saldo"
        okText="Top Up"
        cancelText="Cancel"
        onCancel={() => {
          form.resetFields();
          handleCancelTransaction();
        }}
        onOk={() => {
          form
            .validateFields()
            .then((values) => {
              console.log(values, "isi form");
              handleSubmitTransaction(values);
              form.resetFields();
            })
            .catch((info) => {
              console.error("Validate Failed:", info);
            });
        }}
      >
        <Form form={form} layout="vertical">
          <Form.Item
            name="amount"
            label="Amount"
            rules={[{ required: true, message: "Please input amount!" }]}
          >
            <InputNumber
              style={{ width: "100%" }}
              formatter={(value) =>
                `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
              }
              parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
            />
          </Form.Item>
        </Form>
      </Modal> */}
      <MembershipModal
        visible={visibleModal}
        confirmLoading={confirmLoading}
        initialData={initialData}
        onCreate={async (data) => {
          onSubmit(data);
        }}
        onCancel={() => {
          setInitialData({});
          setVisibleModal(false);
        }}
      />
    </div>
  );
});