import React, { ChangeEvent } from 'react';
import { Layout } from '../shared/Layout';
import { ProductClient } from '../../APIClient';
import Swal from 'sweetalert2';
import ProductForm from '../../components/ProductForm';
import Errors from '../../components/Errors';
import Link from 'next/link';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
import { ProductFormState } from '../../interfaces/product';

class CreateProduct extends React.Component<{}, ProductFormState> {
    constructor(props) {
        super(props)
        this.state = {
            form: {
                name: "",
                price: 0,
            },
            errors: [],
            busy: false,
        }
    }
    onNameChanged(newName) {
        this.setState({
            form: {
                name: newName,
                price: this.state.form.price,
            }
        });
    }
    onPriceChanged(newPrice) {
        this.setState({
            form: {
                name: this.state.form.name,
                price: newPrice
            }
        });
    }
    async validate() {
        let errors: string[] = [];
        if (!this.state.form.name) {
            errors.push("Name required");
        }
        if (!this.state.form.price) {
            errors.push("Price required");
        }
        await new Promise((resolve) => {
            this.setState({
                errors
            }, () => resolve(undefined));
        })
        return errors.length == 0;
    }
    async onSubmit() {
        if (await this.validate()) {
            await new Promise((resolve) => {
                this.setState({
                    busy: true,
                }, () => resolve(undefined));
            })
            try {
                const form = this.state.form;
                const client = new ProductClient();
                await client.post({
                    name: form.name,
                    price: form.price,
                })
                Swal.fire({
                    title: "Submitted!",
                    text: "Product is now in database",
                })
            } catch (error) {

            } finally {
                await new Promise((resolve) => {
                    this.setState({
                        busy: false,
                    }, () => resolve(undefined));
                })

            }
        }
    }
    render() {
        return (
            <div className="container mx-auto">
                <h1>Create Product</h1>
                <Link href="/product/">
                    <a>
                        <FontAwesomeIcon icon={faArrowLeft} /> Return to index
                    </a>
                </Link>
                <ProductForm
                    name={this.state.form.name}
                    price={this.state.form.price}
                    busy={this.state.busy}
                    onNameChange={this.onNameChanged.bind(this)}
                    onPriceChange={this.onPriceChanged.bind(this)}
                    onSubmit={this.onSubmit.bind(this)} />
                <ul>
                    <Errors errors={this.state.errors}></Errors>
                </ul>
            </div>
        )
    }
}


export default function CreateProductPage() {
    return (
        <Layout title="Create product">
            <CreateProduct></CreateProduct>
        </Layout>
    )
}