import { SocialLinks } from '@frontend/components/layout/SocialLinks';
import { siteLogoAlt, siteLogoSrc } from '@frontend/lib/site-logo';
import { useSiteChrome } from '@frontend/lib/site-chrome';
import { Link } from '@inertiajs/react';

export function OffcanvasSidebar() {
    const { address, email, emailHref, phone, phoneHref, socials } = useSiteChrome();

    return (
        <>
            <div className="offcanvas offcanvas-end" data-bs-scroll="true" tabIndex="-1" id="offcanvas-sidebar" aria-labelledby="offcanvas-sidebar">
                {/* offcanvas header start */}
                <div className="offcanvas-header">
                    {/* offcanvas logo start */}
                    <div className="offcanvas-logo">
                        <figure>
                            <img src={siteLogoSrc} alt={siteLogoAlt} />
                        </figure>                        
                    </div>
                    {/* offcanvas logo emd */}
                    {/* offcanvas close start */}
                    <button type="button" className="offcanvas-close bg-transparent" data-bs-dismiss="offcanvas" aria-label="Close"><i className="fa-solid fa-xmark"></i></button>
                    {/* offcanvas close end */}
                </div>
                {/* offcanvas header end */}
                {/* offcanvas body start */}
                <div className="offcanvas-body">
                    {/* menu outer start */}
                    <div className="mobile-menu">
                        {/* Here menu will come automatically via javascript / same menu as in header */}
                    </div>
                    {/* menu outer end */}
                    {/* offcanvas about start */}
                    <div className="offcanvas-about d-none d-xl-block">
                        <p>There are many variations of passages available sure there majority have suffered alteration in some form by inject humour or randomised words which don't look even slightly believable.</p>
                    </div>
                    {/* offcanvas about end */}
                    {/* offcanvas contact start */}
                    <div className="offcanvas-contact">
                        {/* widget-contact start */}
                        <div className="widget widget-contact">
                            {/* widget title start */}
                            <div className="widget-title">
                                <h3 className="line-anime">Contact Info</h3>
                            </div>
                            {/* widget title end */}
                            {/* widget content start */}
                            <div className="widget-content">
                                {/* offcanvas cta item start */}
                                <div className="offcanvas-cta-item">
                                    {/* offcanvas cta list start */}
                                    {address !== '' && (
                                    <div className="offcanvas-cta-list">
                                        <div className="offcanvas-cta-icon">
                                            <i className="fa-solid fa-location-dot"></i>
                                        </div>
                                        <div className="offcanvas-cta-content"> 
                                            <p>{address}</p>
                                        </div>
                                    </div>
                                    )}
                                    {/* offcanvas cta list end */}
                                     {/* offcanvas cta list start */}
                                    {email !== '' && (
                                    <div className="offcanvas-cta-list">
                                        <div className="offcanvas-cta-icon">
                                            <i className="fa-solid fa-envelope"></i>
                                        </div>
                                        <div className="offcanvas-cta-content"> 
                                            <a href={emailHref}>{email}</a>
                                        </div>
                                    </div>
                                    )}
                                    {/* offcanvas cta list end */}
                                    {/* offcanvas cta list start */}
                                    {phone !== '' && (
                                    <div className="offcanvas-cta-list">
                                        <div className="offcanvas-cta-icon">
                                            <i className="fa-solid fa-phone-volume"></i>
                                        </div>
                                        <div className="offcanvas-cta-content"> 
                                            <a href={phoneHref}>{phone}</a>
                                        </div>
                                    </div>
                                    )}
                                    {/* offcanvas cta list end */}
                                </div>
                                {/* offcanvas cta item end */}
                            </div>
                            {/* widget content end */}
                        </div>
                        {/* widget-contact end */}
                    </div>
                    {/* offcanvas contact end */}
                    {/* offcanvas button wapper start */}
                    <div className="offcanvas-button-wapper"> 
                        <Link href="/book" className="theme-button style-1" aria-label="Book Now">
                            Book Now
                        </Link>
                    </div>
                    {/* offcanvas button wapper end */}
                    {/* offcanvas social start */}
                    {socials.length > 0 && (
                    <div className="offcanvas-social">
                        {/* widget social media start */}
                        <div className="widget widget-social-media"> 
                            {/* widget content start */}
                            <div className="widget-content">
                                {socials.length > 0 && <SocialLinks />}
                            </div>
                            {/* widget content end */}
                        </div>
                        {/* widget social media end */}
                    </div>
                    )}
                    {/* offcanvas-social end */}
                </div>
                {/* offcanvas body end */}
            </div>
        </>
    );
}