'use client';

import React, { FC, useEffect, useState } from 'react';
import { Form, Upload } from 'antd';
import type { UploadFile, UploadProps } from 'antd';
import ImgCrop from 'antd-img-crop';
import { CameraOutlined, DeleteOutlined } from '@ant-design/icons';
import { useRouter } from '../../navigation';
import { i18nText } from '../../i18nKeys';
import { Profile } from '../../types/profile';
import { useProfileSettings } from '../../actions/hooks/useProfileSettings';
import { CustomInput } from '../view/CustomInput';
import { OutlinedButton } from '../view/OutlinedButton';
import { FilledYellowButton } from '../view/FilledButton';
import { DeleteAccountModal } from "../Modals/DeleteAccountModal";

type ProfileSettingsProps = {
    locale: string;
};

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

export const ProfileSettings: FC<ProfileSettingsProps> = ({ locale }) => {
    const [form] = Form.useForm<Profile>();
    const { profileSettings } = useProfileSettings(locale);
    const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
    const router = useRouter();

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

    const saveProfileSettings = () => {
        form.validateFields()
            .then(() => {
                console.log('success')
            })
    }

    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);
    };

    const onDeleteAccount = () => setShowDeleteModal(true);

    return (
        <Form form={form} className="form-settings">
            <div className="user-avatar">
                <div className="user-avatar__edit" style={profileSettings?.faceImageUrl ? { backgroundImage: `url(${profileSettings.faceImageUrl})` } : undefined}>
                    <input className="" type="file" id="input-file" />
                    <label htmlFor="input-file" className="form-label" />
                </div>
                <div className="user-avatar__text">{i18nText('photoDesc', locale)}</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-fieldset">
                <div className="form-field">
                    <Form.Item name="username">
                        <CustomInput placeholder={i18nText('name', locale)} />
                    </Form.Item>
                </div>
                <div className="form-field">
                    <Form.Item name="surname">
                        <CustomInput placeholder={i18nText('surname', locale)} />
                    </Form.Item>
                </div>
                {/* <div className="form-field">
                <Form.Item name="birthday">
                    <CustomInput placeholder={i18nText('birthday', locale)} />
                </Form.Item>
            </div> */}
                <div className="form-field">
                    <Form.Item name="login">
                        <CustomInput type="email" placeholder="E-mail" />
                    </Form.Item>
                </div>
            </div>
            <div className="form-actions">
                <FilledYellowButton onClick={saveProfileSettings}>{i18nText('save', locale)}</FilledYellowButton>
                <OutlinedButton onClick={() => router.push('change-password')}>
                    {i18nText('changePass', locale)}
                </OutlinedButton>
                <OutlinedButton
                    onClick={onDeleteAccount}
                    icon={<DeleteOutlined />}
                    danger
                >
                    {i18nText('deleteAcc', locale)}
                </OutlinedButton>
            </div>
            <DeleteAccountModal
                open={showDeleteModal}
                handleCancel={() => setShowDeleteModal(false)}
            />
        </Form>
    );
};