import React from 'react'
import Layout from './Layout.jsx'
import WorksTable from '../Components/WorksTable.jsx'
import { Link, usePage } from '@inertiajs/inertia-react'
import toast from 'react-hot-toast'
import loadingImage from '../../images/loading.gif'
import axios from 'axios'

export default function WorksData () {
    const { fair, works, user_id } = usePage().props
    const userLoggedIn = user_id && user_id !== ''

    const [submitting, setSubmitting] = React.useState(false)
    const [data, setData] = React.useState(works)

    const handleSubmit = (e) => {
        setSubmitting(true)
        axios.post('/map_works', data).then(res => {
            setSubmitting(false)
            if (res.data.error) {
                toast(res.data.message, {
                    duration: 5000,
                    style: {
                        backgroundColor: '#f89406'
                    }
                })
                return
            }
            window.location = res.data.redirect_url
        }).catch(() => {
            setSubmitting(false)
        })
    }

    const handleSelectWorkEdition = (index, value) => {
        let newData = data
        newData[index].selected_edition = value
        setData(newData)
    }

    const handleSelectPrice = (index, value) => {
        let newData = data
        newData[index].selected_price = value
        setData(newData)
    }

    return (
        <Layout step={4}>
            <h2 className="fs-6 text-center py-4 m-0">{_translations.works_data}</h2>
            <div className="mx-auto mt-3">
                {userLoggedIn &&
                    <p>{_translations.works_msg}</p>}
                {(!works || works?.length === 0) &&
                    <p className="text-center py-4 m-0">{_translations.works_not_included}</p>
                }
                {(!works || works?.length === 0) &&
                    <p className="text-center py-4 m-0" dangerouslySetInnerHTML={{ __html: _translations.add_works_instructions }}/>
                }
                {works?.length > 0 &&
                    <WorksTable
                        works={works}
                        showWorkSelector={userLoggedIn}
                        showPriceSelector={true}
                        handleSelectWorkEdition={handleSelectWorkEdition}
                        handleSelectPrice={handleSelectPrice}
                    />}
                <nav className="mb-3 mt-2 d-flex justify-content-between align-items-center">
                    <Link href={'/exposition_data?c=' + fair.code}>
                        {_translations.go_back}
                    </Link>

                    <button type="button" className="btn btn-34"
                            id="submit-work-data-btn" onClick={handleSubmit}>
                        {(submitting ? <img src={loadingImage} alt="Loading..." width="20px" height="20px"/>
                            : _translations.next)}
                    </button>
                    <input type="hidden" name="fair_code" id="fair_code" value={fair.code}/>
                </nav>
            </div>
        </Layout>
    )
}
