import React, {useState} from "react";
import {Button, Card, Col, Divider, Image, Input, List, message, Row, Space, Table,} from "antd";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {CheckCircleOutlined, CloseOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
import {PaybackModal} from "./PaybackModal";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";

const {Search} = Input;

export const Payback = observer(() => {
    const store = useStore();
    const [visibleModal, setVisibleModal] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [initialData, setInitialData] = useState({});

    // useEffect(() => {
    //     // const init = async () => {
    //     //   try {
    //     //     setIsLoading(true);
    //     //     await store.membership.getData();
    //     //     await store.role.getData();
    //     //     setIsLoading(false);
    //     //   } catch (e) {
    //     //     setIsLoading(false);
    //     //   }
    //     // };
    //
    //     // init();
    // }, []);

    const dummyData = [
        {
            id: 1,
            name: "John Doe",
            picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
            amount: "Rp. 1.000.000",
        },
        {
            id: 1,
            name: "John Doe",
            picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
            amount: "Rp. 1.000.000",
        },
        {
            id: 1,
            name: "John Doe",
            picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
            amount: "Rp. 1.000.000",
        },
        {
            id: 1,
            name: "John Doe",
            picture: "https://presidenproperti.com/wp-content/uploads/2018/11/blog-ph.jpg",
            amount: "Rp. 1.000.000",
        },
    ]

    const columns = [
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "Picture",
            dataIndex: "picture",
            key: "picture",
            render: (text, record) => (
                <Image
                    src={record.picture}
                    style={{width: 50, height: 50}}
                    shape="circle"
                    alt="avatar"
                />
            ),
        },
        {
            title: "Amount",
            dataIndex: "amount",
            key: "amount",
        },
        {
            title: "Action",
            key: "action",
            width: 100,
            render: (text, record) => (
                <Space size="middle">
                    <Button
                        onClick={async () => {
                            await handleAction(record, 'accept');
                        }}
                        icon={<CheckCircleOutlined/>}
                        style={{
                            backgroundColor: "#1bb91d",
                            color: "#fff",
                            borderColor: "#1bb91d",
                        }}
                    >
                        Accept
                    </Button>
                    <Button
                        onClick={async () => {
                            await handleAction(record, 'reject');
                        }}
                        icon={<CloseOutlined/>}
                        style={{
                            backgroundColor: "#ff1c1c",
                            color: "#fff",
                            borderColor: "#ff1c1c",
                        }}
                    >
                        Reject
                    </Button>
                </Space>
            ),
        },
    ];

    const routeData = [
        {
            route: LINKS.HOME,
            name: "Home",
        },
        {
            route: LINKS.PAYBACK,
            name: <span style={{fontWeight: "bold"}}>Payback</span>,
        },
    ];

    const onSubmit = async (data) => {
        setConfirmLoading(true);
        try {
            // await store.membership.create(data);
            // message.success("Success Add New Member");
            // await store.membership.getData();
        } catch (e) {
            console.error(e, "apa errornya");
            message.error("Failed Add Member");
        }
        setConfirmLoading(false);
        setVisibleModal(false);
    };

    const handleAction = async (record, type) => {

    };

    return (
        <div className={["ppob-container"].join(" ")}>
            {/* <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal> */}
            <BreadcumbComponent data={routeData}/>
            <Card>
                <div>
                    <Row style={{marginBottom: 20}}>
                        <Col span={12}>
                            <Button>
                                <FilterOutlined/>
                                Filter
                            </Button>
                        </Col>
                        <Col span={12} style={{textAlign: "right"}}>
                            <Search
                                placeholder="input search text"
                                style={{
                                    width: store.ui.mediaQuery.isMobile ? 160 : 200,
                                    marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
                                    marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
                                }}
                            />
                            <Button
                                onClick={() => {
                                    setInitialData({});
                                    setVisibleModal(true);
                                }}
                            >
                                <PlusSquareOutlined/> New
                            </Button>
                        </Col>
                    </Row>
                    {store.ui.mediaQuery.isDesktop && (
                        <Table
                            key="1"
                            hasEmpty
                            columns={columns}
                            dataSource={dummyData}
                            bordered
                            // pagination={{
                            //     pageSize: store.membership.pageSize,
                            //     total: store.membership.total_data,
                            //     current: store.membership.page + 1,
                            //     showSizeChanger: true,
                            //     simple: false
                            // }}
                            // onChange={async (page) => {
                            //     let pageNumber = page.current;
                            //     store.membership.pageSize = page.pageSize;
                            //     store.membership.page = pageNumber - 1;
                            //     // store.membership.isLoading = true;
                            //     await store.membership.getData();
                            //     // store.membership.isLoading = false;
                            // }}
                        />
                    )}

                    {store.ui.mediaQuery.isMobile && (
                        <List
                            itemLayout="horizontal"
                            position={"top"}
                            // pagination={{
                            //     onChange: (page) => {
                            //         store.membership.pageSize = page.pageSize;
                            //         store.membership.page = page.current;
                            //         store.membership.getData();
                            //     },
                            //     pageSize: store.membership.pageSize,
                            //     total: store.membership.total_data,
                            //     current: store.membership.page,
                            //     style: {marginBottom: "1rem", marginRight: "1rem"},
                            // }}
                            dataSource={dummyData}
                            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.name}
                                                description={
                                                    <div style={{}}>
                                                        <Image src={item.picture} preview={false}/>
                                                    </div>
                                                }
                                            />
                                            <div style={{marginRight: 16}}>
                                                <p
                                                    style={{
                                                        fontSize: 9,
                                                        margin: 0,
                                                    }}
                                                >
                                                    {item.amount}
                                                </p>
                                            </div>
                                        </List.Item>
                                        <Divider plain style={{margin: 0}}/>
                                    </div>
                                );
                            }}
                        />
                    )}
                </div>
            </Card>

            <PaybackModal
                visible={visibleModal}
                confirmLoading={confirmLoading}
                initialData={initialData}
                onCreate={async (data) => {
                    await onSubmit(data);
                }}
                onCancel={() => {
                    setInitialData({});
                    setVisibleModal(false);
                }}
            />
        </div>
    );
});