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

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

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

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

const { Option } = Select;

export default ()=> {
    const [ cities, setCities ] = useState([]);
    useEffect(() => {
        _service({
            url: 'public/cities',
            success: (response) => {
                setCities(response.json);
            },
            fail: (e) => {
                console.error('Service Cities Error', e);
            }
        });
    }, []);

    const onFinish = (values) => {
        console.log('Success:', values);
        _service({
            method: 'POST',
            url: 'public/register',
            data: values,
            success: (response) => {
                if (response.result) {
                    notification["success"]({
                        message: 'Registado',
                        description: 'Foi registado com sucesso.',
                    });
                }
            },
            fail: (e) => {
                console.error('Service Register Error', e);
                notification["error"]({
                    message: 'Não Registado',
                    description: 'Não foi possível registar, tente mais tarde.',
                });
            }
        });
    };

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

    return (
    <Form
        {...layout}
        name="basic"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
    >
        <Form.Item
        label="Nome"
        name="name"
        rules={[{ required: true, message: 'Por favor insira o seu nome.' }]}
        >
            <Input />
        </Form.Item>
        <Form.Item
        label="Apelido"
        name="surname"
        rules={[{ required: true, message: 'Por favor insira o seu apelido.' }]}
        >
            <Input />
        </Form.Item>
        <Form.Item
        label="E-mail"
        name="email"
        rules={[
            { required: true, message: 'Por favor insira o seu e-mail.' },
            { type: 'email', message: 'E-mail inválido.' }
        ]}
        >
            <Input />
        </Form.Item>
        <Form.Item
        label="Utilizador"
        name="username"
        rules={[
            { required: true, message: 'Por favor insira o seu utilizador.' },
            { type: 'string', message: 'Utilizador inválido, apenas letras minúsculas e números.', pattern: '^[a-z0-9]{1,25}$' }
        ]}
        >
            <Input />
        </Form.Item>
        <Form.Item
        label="Password"
        name="password"
        rules={[{ required: true, message: 'Por favor insira o seu password.' }]}
        >
            <Input.Password />
        </Form.Item>

        <Form.Item
        label="Cidade"
        name="city_uid"
        rules={[{ required: true, message: 'Por favor insira a sua cidade.' }]}
        >
            <Select allowClear>
                {
                    cities.map(( {uid, name} ) => (
                        <Option value={uid}>{name}</Option>
                    ))
                }
            </Select>
        </Form.Item>

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