import React, { useState, useEffect } from "react";

import { Form, Input, Button, Select } from 'antd';

import _service from '@netuno/service-client';

import './index.less';

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};

export default () => {
    const [ loading, setLoading ] = useState(false);
    const [ cities, setCities ] = useState([]);

    useEffect(()=> {
        _service({
            url: 'cities',
            success: (response) => {
                setCities(response.json);
            },
            fail: (e) => {
                console.log("Service Error", e);
            }
        })
    }, []);

    const onFinish = (values) => {
        setLoading(true);
        _service({
            method: 'POST',
            url: "register",
            data: values,
            success: (response) => {
                setLoading(false);
            },
            fail: (e) => {
                console.log("Service Error", e);
            }
        });
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    return (
        <div>
            <h1>Register</h1>
            <div className="register">
                <Form
                    {...layout}
                    name="basic"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    >
                    <Form.Item
                        label="Nome"
                        name="name"
                        rules={[
                        {
                            required: true,
                            message: 'Por favor preencha o seu nome.',
                        },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="Apelido"
                        name="surname"
                        rules={[
                        {
                            required: true,
                            message: 'Por favor preencha o seu apelido.',
                        },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="Cidade"
                        name="city_uid"
                        rules={[
                        {
                            required: true,
                            message: 'Por favor preencha a seu cidade.',
                        },
                        ]}
                    >
                        <Select>
                            {
                                cities.map(({uid, name})=>
                                    <Select.Option value={uid}>{name}</Select.Option>
                                )
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="E-mail"
                        name="email"
                        rules={[
                            {
                                type: 'email',
                                message: 'Preencha um e-mail válido.' 
                            },
                            {
                                required: true,
                                message: 'Por favor preencha o seu e-mail.',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="Utilizador"
                        name="username"
                        rules={[
                        {
                            required: true,
                            message: 'Por favor preencha o seu utilizador.',
                        },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="Palavra-passe"
                        name="password"
                        rules={[
                        {
                            required: true,
                            message: 'Por favor preencha o seu palavra-passe.',
                        },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item {...tailLayout}>
                        <Button type="primary" htmlType="submit" loading={loading}>
                        Enviar
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
};
