'use client';

import React, { FC, useEffect, useState } from 'react';
import { Form, Upload, Button } from 'antd';
import type { UploadFile, UploadProps } from 'antd';
import ImgCrop from 'antd-img-crop';
import { CameraOutlined } from '@ant-design/icons';
import { Link } from '../../navigation';
import { CustomInput } from '../view';
import { Profile } from '../../types/profile';
import { useProfileSettings } from '../../actions/hooks/useProfileSettings';

type ProfileSettingsProps = {
    locale: string;
    photoDesc?: string;
    placeholderName?: string;
    placeholderSurname?: string;
    placeholderBirthday?: string;
    placeholderEmail?: string;
    changePasswordLink?: string;
    saveButton?: string;
};

// type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];

export const ProfileSettings: FC<ProfileSettingsProps> = ({
    locale,
    photoDesc,
    placeholderName,
    placeholderSurname,
    placeholderBirthday,
    placeholderEmail,
    changePasswordLink,
    saveButton
}) => {
    const [form] = Form.useForm<Profile>();
    const { profileSettings } = useProfileSettings(locale);

    useEffect(() => {
        if (profileSettings) {
            form.setFieldsValue(profileSettings);
        }
    }, [profileSettings]);

    const [fileList, setFileList] = useState<UploadFile[]>();

    const onChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {
        setFileList(newFileList);
    };

    const onPreview = async (file: UploadFile) => {
        // let src = file.url as string;
        // if (!src) {
        //     src = await new Promise((resolve) => {
        //         const reader = new FileReader();
        //         reader.readAsDataURL(file.originFileObj as FileType);
        //         reader.onload = () => resolve(reader.result as string);
        //     });
        // }
        // const image = new Image();
        // image.src = src;
        // const imgWindow = window.open(src);
        // imgWindow?.document.write(image.outerHTML);
    };

    return (
        <Form form={form} className="form-settings">
            <div className="user-avatar">
                <div className="user-avatar__edit">
                    <input className="" type="file" id="input-file" />
                    <label htmlFor="input-file" className="form-label" />
                </div>
                <div className="user-avatar__text">{photoDesc}</div>
            </div>
            <ImgCrop rotationSlider>
                <Upload
                    action="https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188"
                    fileList={fileList}
                    onChange={onChange}
                    onPreview={onPreview}
                >
                    <Button icon={<CameraOutlined />}>Click to Upload</Button>
                </Upload>
            </ImgCrop>
            <div className="form-field">
                <Form.Item name="username">
                    <CustomInput placeholder={placeholderName} />
                </Form.Item>
            </div>
            <div className="form-field">
                <Form.Item name="surname">
                    <CustomInput placeholder={placeholderSurname} />
                </Form.Item>
            </div>
            {/* <div className="form-field">
                <Form.Item name="birthday">
                    <CustomInput placeholder={placeholderBirthday} />
                </Form.Item>
            </div> */}
            <div className="form-field">
                <Form.Item name="login">
                    <CustomInput type="email" placeholder={placeholderEmail} />
                </Form.Item>
            </div>
            <div className="form-link">
                <Link href={'change-password' as any}>
                    {changePasswordLink}
                </Link>
            </div>
            <button className="btn-apply">{saveButton}</button>
        </Form>
    );
};