import React from 'react'
import axios from 'axios'
import Layout from './Layout.jsx'
import loadingImage from '../../images/loading.gif'
import dayjs from 'dayjs'
import WorksTable from '../Components/WorksTable.jsx'
import toast from 'react-hot-toast'

export default function Summary ({ fair, account, exposition, works, user_id, gallery_id }) {
    const dateFormat = 'DD-MM-YYYY'
    const [data, setData] = React.useState({
        user_id: user_id,
        gallery_id: gallery_id,
        fair_code: fair.code,
    })
    const newWorks = works ? works.filter(work => !work.id) : []
    const existingWorks = works ? works.filter(work => work.id) : []

    const [submitting, setSubmitting] = React.useState(false)
    const [showMore, setShowMore] = React.useState(false)
    const handleSubmit = function (e) {
        e.preventDefault()
        setSubmitting(true)
        let loadingToastId = toast.loading(_translations.sending_data_to_exhibify)
        axios.post(
            '/accept_data',
            data,
            {
                withCredentials: true,
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                }
            }
        ).then(res => {
            setSubmitting(false)
            toast.dismiss(loadingToastId)
            if (!res.data.redirect_url) {
                toast.error(
                    _translations.error_on_exhibify
                )
            }
            toast.success(res.data.message)
            setTimeout(function () {
                window.location = res.data.redirect_url
            }, 3000)
        }).catch(err => {
            setSubmitting(false)
            toast.dismiss(loadingToastId)
            toast.error(
                _translations.error_on_exhibify
            )
            console.log(err)
        })
    }
    const formatDate = function (date) {
        return dayjs(new Date(date)).format(dateFormat)
    }

    const handleMoreInfo = function (e) {
        e.preventDefault()
        setShowMore(!showMore)
    }

    return (
        <Layout step={5}>
            <div className="summary w-50 mx-auto">
                <form onSubmit={handleSubmit}>
                    <div className="text-center mb-5">
                        {_translations.this_are_the_details_sent_to} <a className="text-decoration-underline" target="_blank"
                                                                 href="https://exhibify.net">Exhibify</a>:
                    </div>
                    <hr/>
                    <div>
                        <span className="fs-7 fw-bold" style={{ color: '#585858' }}>{_translations.exposition_data}</span>
                        <div className="exposition-info d-flex mt-3">
                            <img src={exposition.main_image.thumb_url ?? exposition.main_image_url} alt=""
                                 style={{ width: '60px', height: '60px' }}/>
                            <div className="w-75 ms-3">
                                <div className="fw-bold fs-6">{exposition.name}</div>
                                <div
                                    className="fw-light fs-7">del {formatDate(exposition.opening_date)} al {formatDate(exposition.closing_date)}</div>
                                <div
                                    className="mt-3"
                                    style={{
                                        display: showMore ? 'block' : 'none',
                                        maxHeight: '150px',
                                        overflowY: 'scroll'
                                    }}>{exposition.description}</div>
                            </div>
                            {exposition.description &&
                                <div className="w-25">
                                    <button className="btn btn-34-white border-dark border"
                                            onClick={handleMoreInfo}>{showMore ? '-' : '+'} Info
                                    </button>
                                </div>
                            }
                        </div>
                        <hr/>
                        <span className="fs-7 fw-bold" style={{ color: '#585858' }}>{_translations.gallery_data}</span>
                        <div className="account-info d-flex mt-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"
                                 fill="none">
                                <path
                                    d="M23.3856 16.6638L20.0195 13.2977L21.1244 12.1929L23.3857 14.4542L28.772 9.06785L29.8768 10.1727L23.3856 16.6638Z"
                                    fill="black"/>
                                <path fillRule="evenodd" clipRule="evenodd"
                                      d="M34.4727 0.474121V25.0835H15.332V0.474121H34.4727ZM16.8945 2.03662H32.9102V23.521H16.8945L16.8945 2.03662Z"
                                      fill="black"/>
                                <path fillRule="evenodd" clipRule="evenodd"
                                      d="M9.08204 34.0948L9.08204 31.9137L9.08203 31.9118L8.75168 31.5815L8.59867 31.4303L7.3863 30.2179C8.84346 29.5887 9.86328 28.1388 9.86328 26.4507C9.86328 24.1855 8.02695 22.3491 5.76172 22.3491C3.49649 22.3491 1.66016 24.1855 1.66016 26.4507C1.66016 28.1388 2.67998 29.5887 4.13714 30.2179L2.58434 31.7707L2.44141 31.9118L2.4414 31.9137L2.44141 49.6929H47.3633L47.3633 31.9137L47.3633 31.9118L47.0329 31.5815L46.88 31.4304L45.6675 30.2179C47.1247 29.5887 48.1445 28.1388 48.1445 26.4507C48.1445 24.1855 46.3082 22.3491 44.043 22.3491C41.7777 22.3491 39.9414 24.1855 39.9414 26.4507C39.9414 28.1388 40.9612 29.5887 42.4184 30.2179L40.8657 31.7706L40.7227 31.9118L40.7226 31.9137L40.7227 34.0811C38.38 35.8756 32.2897 39.146 24.707 39.146C17.1273 39.146 11.2829 35.8779 9.08204 34.0948ZM4.00391 48.1304L4.00391 32.5609L5.76172 30.8031L7.51953 32.5609L7.51953 48.1304H4.00391ZM9.08204 36.0379L9.08203 48.1304H40.7227V35.9942C37.7121 37.9829 31.8336 40.7085 24.707 40.7085C17.6419 40.7085 11.9865 38.0299 9.08204 36.0379ZM45.8008 32.5609L44.043 30.8031L42.2852 32.5609V48.1304H45.8008V32.5609ZM5.76172 28.9897C7.164 28.9897 8.30078 27.853 8.30078 26.4507C8.30078 25.0484 7.164 23.9116 5.76172 23.9116C4.35943 23.9116 3.22266 25.0484 3.22266 26.4507C3.22266 27.853 4.35943 28.9897 5.76172 28.9897ZM46.582 26.4507C46.582 27.853 45.4453 28.9897 44.043 28.9897C42.6407 28.9897 41.5039 27.853 41.5039 26.4507C41.5039 25.0484 42.6407 23.9116 44.043 23.9116C45.4453 23.9116 46.582 25.0484 46.582 26.4507Z"
                                      fill="black"/>
                            </svg>
                            <div className="w-75 ms-3">
                                <div className="fw-bold fs-6">{account.gallery_name}</div>
                                <div className="fw-light fs-7">{account.email}</div>
                            </div>
                        </div>
                        <hr/>
                    </div>
                    <span className="fs-7 fw-bold" style={{ color: '#585858' }}>{_translations.works_data}</span>
                    <div className="mt-3">
                        {(!works || works.length === 0) &&
                            <p className="text-center py-4 fs-7 m-0">{_translations.works_not_included}</p>}
                        {newWorks.length > 0 &&
                            <div>
                                <p>La siguiente tabla muestra las obras que se crearán en tu inventario para enviarlas a Exhibify Shop: </p>
                                <WorksTable works={newWorks}/>
                            </div>
                        }
                        {existingWorks.length > 0 &&
                            <div>
                                <p>Esta tabla muestra las obras que vamos a enviar a Exhibify Shop que ya tenías registradas en tu inventario (y por lo tanto, no las crearemos en tu cuenta): </p>
                                <WorksTable works={existingWorks}/>
                            </div>
                        }
                    </div>
                    <input type="hidden" name="user_id" value={data.user_id}/>
                    <input type="hidden" name="gallery_id" value={data.gallery_id}/>
                    <div className="d-flex buttons mt-5">
                        <div className="w-75 d-flex align-items-md-center">
                            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"
                                 fill="none">
                                <path fillRule="evenodd" clipRule="evenodd"
                                      d="M21.3125 14.9153C21.3125 18.9539 18.0386 22.2278 14 22.2278C9.96142 22.2278 6.6875 18.9539 6.6875 14.9153C6.6875 10.8767 9.96142 7.60278 14 7.60278C18.0386 7.60278 21.3125 10.8767 21.3125 14.9153ZM23 14.9153C23 19.8858 18.9706 23.9153 14 23.9153C9.02944 23.9153 5 19.8858 5 14.9153C5 9.94472 9.02944 5.91528 14 5.91528C18.9706 5.91528 23 9.94472 23 14.9153ZM13.1494 11.7551C13.1494 12.2396 13.5263 12.6057 14 12.6057C14.4738 12.6057 14.8506 12.2396 14.8506 11.7551C14.8506 11.2813 14.4738 10.9152 14 10.9152C13.5263 10.9152 13.1494 11.2813 13.1494 11.7551ZM14.7107 13.5747H13.3002V18.9152H14.7107V13.5747Z"
                                      fill="black"/>
                            </svg>
                            <span className="ms-1">{_translations.press_accept_to_continue}</span>
                        </div>
                        <div className="w-25"></div>
                        <button type="submit" className="btn btn-50">{(submitting ?
                            <img src={loadingImage} alt="Loading..." width="20px" height="20px"/>
                            : _translations.accept)}</button>
                    </div>
                </form>
            </div>
        </Layout>
    )
}
