ppob-frontend/src/pages/Payback/PaybackModal.js

import React, {useState} from 'react';
import {Button, Form, Image, Input, message, Modal, Upload} from 'antd';
import {useStore} from "../../utils/useStore";
import {appConfig} from "../../config/app";
import {LoadingOutlined, UploadOutlined} from "@ant-design/icons";

export const PaybackModal = ({
                                 visible,
                                 onCreate,
                                 onCancel,
                                 initialData,
                             }) => {
    const [form] = Form.useForm();
    const store = useStore();

    const [fileList, setFileList] = useState([]);
    const [previewTitle, setPreviewTitle] = useState("");
    const [previewImage, setPreviewImage] = useState("");
    const [loading, setLoading] = useState(false);
    const [fileUrl, setFileUrl] = useState("");
    const firstIndexFileList = fileList[0];

    const beforeUpload = (file) => {
        let isPdf, isLt2M;
        let allowedFile = ['image/jpeg', 'image/png', "application/pdf"];
        let isValid = allowedFile.includes(file.type)
        if (!isValid) {
            message.error("You can only upload PDF or Image file!");
        }
        // return file.type === 'application/pdf' ? true : Upload.LIST_IGNORE;
        isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error("File must smaller than 2MB!");
        }
        return isValid && isLt2M ? true : Upload.LIST_IGNORE;
    }

    const handlePreview = async (file) => {
        const fileUrl = appConfig.apiUrl + file.response.path;
        setPreviewTitle(file.url?.substring(file.url?.lastIndexOf("/") + 1));
    };

    const handleChange = ({fileList}) => {
        setFileList(fileList);
        if (fileList.length && fileList[0].status === "done") {
            form.setFieldsValue({
                file_url: fileList[0].response.path,
            });
            console.log(fileList, "apaaaaaa");
            setFileUrl(fileList[0].response.path);
            setPreviewImage(fileList[0].response.path);
            setPreviewTitle(fileList[0].name);
        }
    };

    const uploadButton = (
        <div>
            {loading ? (
                <LoadingOutlined/>
            ) : (
                <Button icon={<UploadOutlined/>}>Click to Upload</Button>
            )}
        </div>
    );

    const previewUpload = (
        <Image className="w-full h-full" preview={false}
               src={!fileUrl ? null : `${appConfig.apiUrl}${fileUrl ?? ""}`}/>
    )

    return (
        <Modal
            visible={visible}
            title={"Create a new Payback"}
            okText={"Create"}
            cancelText="Cancel"
            onCancel={() => {
                form.resetFields()
                onCancel()
            }}
            onOk={() => {
                form
                    .validateFields()
                    .then(values => {
                        onCreate(values);
                        form.resetFields()
                    })
                    .catch(info => {
                        console.log('Validate Failed:', info);
                    });
            }}
        >
            <Form
                form={form}
                layout="vertical"
                name="form_in_modal"
                initialValues={initialData}
            >

                <Form.Item
                    name="name"
                    label="name"
                    rules={[{required: true, message: 'Please input Name!'}]}
                >
                    <Input/>
                </Form.Item>
                <Form.Item
                    label="Upload Picture"
                    name="picture"
                >
                    <div style={{
                        display: "flex",
                        justifyContent: "space-between",
                        alignItems: "center",
                    }}>
                        <div>
                            <Upload
                                name="file"
                                maxCount={1}
                                className="avatar-uploader"
                                // listType="picture-card"
                                action={appConfig.apiUrl + "/files"}
                                fileList={fileList}
                                beforeUpload={beforeUpload}
                                onPreview={handlePreview}
                                onChange={handleChange}
                            >
                                {!firstIndexFileList ? uploadButton : null}
                            </Upload>
                            <h5
                                style={{
                                    marginTop: 12,
                                    color: "rgba(0, 0, 0, 0.45)",
                                }}
                            >
                                Max size of file 2 mb
                            </h5>
                        </div>
                        <div>
                            <h5>Preview</h5>
                            <div>
                                <img
                                    src={previewImage}
                                    alt="preview"
                                    style={{width: "100%"}}
                                />
                            </div>
                            <h5>{previewTitle}</h5>
                            <h5>{previewUpload}
                                {previewTitle && <span>{`${previewTitle ?? ""}`}</span>}</h5>
                        </div>
                    </div>
                </Form.Item>
                <Form.Item
                    name="amount"
                    label="amount"
                    rules={[{required: true, message: 'Please input Amount!'}]}
                >
                    <Input/>
                </Form.Item>
            </Form>
        </Modal>
    );
};