import React, {useEffect} from "react";
import {Button, Card, Col, Row, Table, Typography} 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} from "@ant-design/icons";

const {Title, Text} = Typography;

export const Profile = observer(() => {
    const store = useStore();
    const routeData = [
        {
            route: LINKS.HOME,
            name: "Home",
        },
        {
            route: LINKS.PROFILE,
            name: <span style={{fontWeight: 'bold'}}>Profile</span>,
        },
    ];

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

    const columns = [
        {
            title: 'Markup Price',
            dataIndex: 'mark_up_price',
            key: 'mark_up_price',
            width: '20%',
        },
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
            width: '50%',
        },
        {
            title: 'Transaction Date',
            dataIndex: 'created_at',
            key: 'created_at',
        },
    ]

    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={routeData}/>
            <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>
                        </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.authentication.profileData?.wallet}</Text>
                            </Col>
                        </Row>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <div>
                            <Title strong level={3}>History User Transaction</Title>

                            <Button style={{marginBottom: '1rem'}} onClick={() => {
                                console.log('clicked filter')
                            }}>
                                <FilterOutlined/>
                                Filter
                            </Button>
                            <Table
                                columns={columns}
                                dataSource={store.transaction.dataHistoryTransaction}
                                bordered
                            />
                        </div>
                    </Col>
                </Row>
                <div/>
            </Card>
        </div>
    )
});