import React, { useContext, useEffect, useState } from "react";
import {
  Button,
  Card,
  Col,
  Row,
  Table,
  Typography,
  DatePicker,
  Modal,
  Form,
  Input,
  Divider,
  List,
  Image,
  Tag,
} from "antd";
import moment from "moment";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { FilterOutlined } from "@ant-design/icons";
import { format, parseISO } from "date-fns";
import { appConfig } from "../../config/app";

import { ModalLoaderContext } from "../../utils/modal";

const { Title, Text } = Typography;
const { RangePicker } = DatePicker;
export const Profile = observer(() => {
  const store = useStore();
  const [form] = Form.useForm();
  const modalLoader = useContext(ModalLoaderContext);
  const [filterStart, setFilterStart] = useState([]);
  const [filterEnd, setFilterEnd] = useState([]);

  const routeData = [
    {
      route: LINKS.HOME,
      name: "Beranda",
    },
    {
      route: LINKS.PROFILE,
      name: <span style={{ fontWeight: "bold" }}>Profil</span>,
    },
  ];

  const dataRoute = [
    {
      route: LINKS.PROFILE,
      name: "Profil",
    },
  ];

  useEffect(() => {
    (async () => {
      modalLoader.setLoading(true);
      await Promise.allSettled([
        store.authentication.getProfile(),
        store.transaction.getDataHistoryTransaction(),
      ]);
      modalLoader.setLoading(false);
    })();
  }, []);

  const handleRemoveFilter = async () => {
    store.transaction.filterStart = null;
    store.transaction.filterEnd = null;
    form.resetFields();
    setFilterStart([]);
    setFilterEnd([]);
    await store.transaction.getDataHistoryTransaction();
    store.transaction.visibleModalFilterTransaction = false;
  };

  const handleCancelFilter = async () => {
    store.transaction.filterStart = null;
    //form.resetFields();
    store.transaction.filterEnd = null;
    store.transaction.visibleModalFilterTransaction = false;
    await store.transaction.getDataHistoryTransaction();
  };

  const handleSubmitFilter = async () => {
    const data = form.getFieldsValue();
    const awal = (store.transaction.filterStart = moment(
      data.start_date
    ).format("YYYY-MM-DD HH:mm:ss"));
    const akhir = (store.transaction.filterEnd = moment(data.end_date).format(
      "YYYY-MM-DD HH:mm:ss"
    ));
    modalLoader.setLoading(true);
    await store.transaction.getDataHistoryTransaction();
    modalLoader.setLoading(false);
    store.transaction.filterStart = null;
    store.transaction.filterEnd = null;
    //form.resetFields();
    store.transaction.visibleModalFilterTransaction = false;
  };

  const footerLayoutFilter = [
    <Button
      key={"remove"}
      onClick={handleRemoveFilter}
      style={{
        backgroundColor: "#e74e5e",
        color: "#fff",
      }}
    >
      Remove Filter
    </Button>,
    <Button key={"cancel"} onClick={handleCancelFilter}>
      Cancel
    </Button>,
    <Button
      key={"submit"}
      onClick={handleSubmitFilter}
      style={{
        backgroundColor: "#4e79e7",
        color: "#fff",
      }}
    >
      Apply
    </Button>,
  ];
  const columns = [
    {
      title: "Name Produk",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "Price",
      dataIndex: "price",
      key: "price",
      render: (text) =>
        new Intl.NumberFormat("id-ID", {
          style: "currency",
          currency: "IDR",
        }).format(text),
    },
    {
      title: "Pembeli",
      dataIndex: "buyer",
      key: "buyer",
      width: "10%",
    },
    {
      title: "Tujuan",
      dataIndex: "transaction_destination",
      key: "transaction_destination",
    },
    {
      title: "Kode Transaksi",
      dataIndex: "transaction_code",
      key: "transaction_code",
    },
    {
      title: "Status",
      dataIndex: "status",
      key: "status",
      render: (text, record) => {
        return (
          <Tag
            color={
              record.status === 1
                ? "success"
                : record.status === 0
                ? "warning"
                : "processing"
            }
          >
            {record.status === 1
              ? "Success"
              : record.status === 0
              ? "Pending"
              : "Failed"}
          </Tag>
        );
      },
    },
    {
      title: "No Seri",
      dataIndex: "seri_number",
      key: "seri_number",
    },
    {
      title: "IDTrx Mitra",
      dataIndex: "partner_transaction_code",
      key: "partner_transaction_code",
    },
    {
      title: "Tanggal Transaksi",
      dataIndex: "created_at",
      key: "created_at",
      width: "15%",
      render: (text, record) => {
        return (
          <Text>
            {format(parseISO(record.created_at), "dd-MM-yyyy HH:mm:ss")}
          </Text>
        );
      },
    },
    {
      title: "Alasan Gagal",
      dataIndex: "failed_reason",
      key: "failed_reason",
    },
  ];

  const styleSaldoTitle = store.ui.mediaQuery.isDesktop
    ? {
        display: "flex",
        justifyContent: "center",
      }
    : { fontSize: "0.75rem" };
  const styleSaldoContent = store.ui.mediaQuery.isDesktop
    ? {
        fontSize: "1.25rem",
        display: "flex",
        justifyContent: "center",
      }
    : null;

  return (
    <div className={["ppob-container"].join(" ")}>
      <BreadcumbComponent
        data={
          store.authentication.userData.role === "Admin" ||
          store.authentication.userData.role === "Admin Partner"
            ? routeData
            : dataRoute
        }
      />
      <Card>
        <Title strong>Profile</Title>
        <Row style={{ marginBottom: 20 }}>
          <Col lg={12} xs={24}>
            <Row>
              <Col span={12}>
                <Text strong>Name</Text>
              </Col>
              <Col span={12}>
                <Text>
                  {store.authentication.profileData?.userDetail?.name}
                </Text>
              </Col>
              <Col span={12}>
                <Text strong>Phone Number</Text>
              </Col>
              <Col span={12}>
                <Text>
                  {store.authentication.profileData?.userDetail?.phone_number}
                </Text>
              </Col>
              <Col span={12}>
                <Text strong>Username</Text>
              </Col>
              <Col span={12}>
                <Text>{store.authentication.profileData?.username}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Role</Text>
              </Col>
              <Col span={12}>
                <Text>{store.authentication.profileData.roles?.name}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Superior</Text>
              </Col>
              <Col span={12}>
                <Text>
                  {store.authentication.profileData.superior?.username}
                </Text>
              </Col>
              {store.authentication.userData.role === "Retail" && (
                <Row>
                  <Col span={12}>
                    <Text strong>Foto Identitas</Text>
                  </Col>
                  <Col span={12}></Col>
                  <Col span={12}>
                    <Text>
                      <Image
                        src={
                          store.authentication.profileData.userDetail
                            ?.image_identity
                            ? `${appConfig.apiUrl}/config/image/${store.authentication.profileData.userDetail?.image_identity}`
                            : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
                        }
                        style={{ width: "10vw" }}
                      />
                    </Text>
                  </Col>
                  <Col span={24}>
                    <Text strong>Foto Toko</Text>
                    <Text>
                      <Row>
                        {store.authentication.imageProfil.map((item) => (
                          <Image
                            src={
                              item
                                ? `${appConfig.apiUrl}/config/image/${item}`
                                : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
                            }
                            style={{ width: "10vw", marginRight: 15 }}
                          />
                        ))}
                      </Row>
                    </Text>
                  </Col>
                </Row>
              )}
            </Row>
          </Col>
          <Col span={store.ui.mediaQuery.isMobile ? 24 : 5}>
            <Row justify={"center"}>
              <Col lg={12} xs={12}>
                <Title strong level={3} style={styleSaldoTitle}>
                  Saldo
                </Title>
              </Col>
              <Col lg={24} xs={12}>
                <Text style={styleSaldoContent}>
                  {new Intl.NumberFormat("id-ID", {
                    style: "currency",
                    currency: "IDR",
                  }).format(store.authentication.profileData?.wallet || 0)}
                </Text>
              </Col>
              <Col></Col>
            </Row>
          </Col>
          {store.authentication.userData.role != "Admin Partner" &&
            store.authentication.userData.role != "Retail" && (
              <Col span={store.ui.mediaQuery.isMobile ? 24 : 5}>
                <Row justify={"center"}>
                  <Col lg={12} xs={12}>
                    <Title strong level={3} style={styleSaldoTitle}>
                      Profit
                    </Title>
                  </Col>
                  <Col lg={24} xs={12}>
                    <Text style={styleSaldoContent}>
                      {new Intl.NumberFormat("id-ID", {
                        style: "currency",
                        currency: "IDR",
                      }).format(store.authentication.profileData?.profit || 0)}
                    </Text>
                  </Col>
                  <Col></Col>
                </Row>
              </Col>
            )}
        </Row>
        <Row>
          <Col span={24}>
            <div>
              <Title strong level={3}>
                History Transaction
              </Title>
              <Button
                style={{ marginBottom: "1rem" }}
                onClick={() => {
                  store.transaction.visibleModalFilterTransaction = true;
                }}
              >
                <FilterOutlined />
                Filter
              </Button>
              {store.ui.mediaQuery.isDesktop && (
                <Table
                  columns={columns}
                  bordered
                  scroll={{ x: 1300 }}
                  //scroll={{ x: 1500, y: 300 }}
                  dataSource={store.transaction.dataHistoryTransaction}
                  pagination={{
                    pageSize: store.transaction.pageSizeHistoryTransaction,
                    total: store.transaction.total_dataHistoryTransaction,
                    current: store.transaction.pageHistoryTransaction + 1,
                    showSizeChanger: true,
                    simple: false,
                  }}
                  onChange={async (page) => {
                    let pageNumber = page.current;
                    store.transaction.pageSizeHistoryTransaction =
                      page.pageSize;
                    store.transaction.pageHistoryTransaction = pageNumber - 1;
                    modalLoader.setLoading(true);
                    await store.transaction.getDataHistoryTransaction();
                    modalLoader.setLoading(false);
                  }}
                />
              )}
              {store.ui.mediaQuery.isMobile && (
                <List
                  itemLayout="horizontal"
                  position={"top"}
                  dataSource={store.transaction.dataHistoryTransaction}
                  pagination={{
                    onChange: async (page, pageSize) => {
                      console.log(page, "Page");
                      console.log(pageSize, "Page size");
                      store.transaction.pageSizeHistoryTransaction = pageSize;
                      store.transaction.pageHistoryTransaction = page - 1;
                      modalLoader.setLoading(true);
                      await store.transaction.getDataHistoryTransaction();
                      modalLoader.setLoading(false);
                    },
                    pageSize: store.transaction.pageSizeHistoryTransaction,
                    total: store.transaction.total_dataHistoryTransaction,
                    current: store.transaction.pageHistoryTransaction + 1,
                    style: { marginBottom: "1rem", marginRight: "1rem" },
                  }}
                  style={{ padding: 0 }}
                  renderItem={(item) => {
                    return (
                      <div>
                        <List.Item
                          key={item.id}
                          style={{
                            backgroundColor: "#ffffff",
                            paddingTop: 0,
                            paddingBottom: 0,
                            display: "flex",
                            flexDirection: "row",
                            alignItems: "center",
                            justifyContent: "center",
                          }}
                        >
                          <List.Item.Meta
                            className={["cariparkir-container"].join(" ")}
                            title={item.buyer}
                            description={
                              <div style={{}}>
                                <p>
                                  <small>Price : {item.price}</small> <br />
                                  <small>
                                    Tujuan : {item.transaction_destination}
                                  </small>{" "}
                                  <br />
                                  <small>
                                    Kode Transaksi : {item.transaction_code}
                                  </small>{" "}
                                  <br />
                                  <small>
                                    Status :{" "}
                                    {
                                      <Tag
                                        color={
                                          item.status === 1
                                            ? "success"
                                            : item.status === 0
                                            ? "warning"
                                            : "processing"
                                        }
                                      >
                                        {item.status === 1
                                          ? "Success"
                                          : item.status === 0
                                          ? "Pending"
                                          : "Failed"}
                                      </Tag>
                                    }
                                  </small>{" "}
                                  <br />
                                  <small>
                                    No.Seri : {item.seri_number}
                                  </small>{" "}
                                  <br />
                                  <small>
                                    Alasan Gagal : {item.failed_reason}
                                  </small>{" "}
                                  <br />
                                  <small>
                                    IDTrx Mitra :{" "}
                                    {item.partner_transaction_code}
                                  </small>{" "}
                                  <br />
                                  <small>
                                    Transaction Date :{" "}
                                    {format(
                                      parseISO(item.created_at),
                                      "dd-MM-yyyy"
                                    )}
                                  </small>{" "}
                                  <br />
                                </p>
                              </div>
                            }
                          />
                        </List.Item>
                        <Divider plain style={{ margin: 0 }} />
                      </div>
                    );
                  }}
                />
              )}
            </div>
          </Col>
        </Row>
        <div />
      </Card>
      <Modal
        visible={store.transaction.visibleModalFilterTransaction}
        title={"Filter"}
        footer={footerLayoutFilter}
        onCancel={async () => {
          //form.resetFields();
          store.transaction.filterStart = null;
          store.transaction.filterEnd = null;
          store.transaction.visibleModalFilterTransaction = false;
          await store.transaction.getDataHistoryTransaction();
        }}
      >
        <Row>
          <Col span={24}>
            <Form layout="vertical" name="filter" form={form}>
              <Form.Item
                name="start_date"
                label="Dari"
                rules={[{ required: true, message: "Please input Date!" }]}
              >
                <DatePicker style={{ width: "100%" }} />
              </Form.Item>
              <Form.Item
                name="end_date"
                label="Sampai"
                rules={[{ required: true, message: "Please input Date!" }]}
              >
                <DatePicker style={{ width: "100%" }} />
              </Form.Item>
            </Form>
          </Col>
        </Row>
      </Modal>
    </div>
  );
});