import React, {memo, useState} from 'react'
import getImage from "../../../utils/getImage";
import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
import queryKeys from '../../../services/queryKeys';
import {getTemplateConfig} from '../../../services/services';
import {Link} from "react-router-dom";
import siteLinks from "../../../links/siteLinks";
import UploadModal from './UploadModal';

const TemplateConfigure = ({productData}) => {

    const [selectedSectionDetails, setSelectedSectionDetails] = useState({})

    // /panel/myproduct/template-config

    const queryClient = useQueryClient()

    const {data: templateData, isFetching, isError, error} = useQuery({
        queryKey: queryKeys.myTemplateConfig,
        queryFn: () => {
            let reqData = {
                token: localStorage.getItem('token'), // USER TOKEN
                uid: localStorage.getItem('uid'), // USER UID
                product_id: productData?.product_id
            }
            return getTemplateConfig(reqData)
        },
        staleTime: 0
    })

    const templateResponse = templateData?.data
    const templateImages = templateResponse?.template_images?.data;
    // debugger;
    console.log("templateResponse", templateResponse);
    // const currentColorUID = templateResponse?.current_colorstyle_uid
    // const color_styles = templateResponse?.color_styles
    // const custom_template_name = templateResponse?.custom_template_name

    return <>
        <div className="card card-statistics">
            {isFetching ?
                <>
                    <div className="row">
                        <div className="col-12">
                            <p className='text-mute'>Loading...</p>
                        </div>
                    </div>
                </>
                : isError ?
                    <div className="row">
                        <div className="col-12">
                            <p className='text-danger'>{error?.message}</p>
                        </div>
                    </div>
                    :
                    <>
                        <div className="card-header">
                            <div className="card-heading">
                                <h4 className="card-title"
                                    style={{textTransform: 'none'}}>{templateResponse?.template_name}</h4>
                            </div>
                        </div>


                        <div>
                            <div className="col-12">
                                <div>
                                    <div>
                                        <div>
                                            <h4>Image List</h4>
                                        </div>
                                    </div>
                                    <div>
                                        <ul className="list-unstyled">
                                            {templateImages && templateImages.map(
                                                (item) => {
                                                    const currImage = item?.default_val;
                                                    return (
                                                        <li className="media">
                                                            <div style={{
                                                                display: 'flex',
                                                                flexDirection: 'row',
                                                                padding: '5px',
                                                                backgroundColor: 'aliceblue',
                                                                margin: '2px',
                                                                maxHeight: '150px'
                                                            }}>
                                                                <div className='d-flex justify-content-center align-items-center' style={{padding: '6px', width: '120px', height: '100px'}}>
                                                                    <img className="mb-xxs-0 img-fluid"
                                                                    style={{height: 'auto', maxHeight: '100px'}}
                                                                         src={currImage} alt="image"/>
                                                                </div>

                                                                <div className="media-body" style={{padding: '2px'}}>
                                                                    <div style={{
                                                                        display: 'flex',
                                                                        flexDirection: 'column'
                                                                    }}>
                                                                        <div style={{textAlign: 'right',width: '100%'}}></div>
                                                                        {/* [Change Image] */}
                                                                        <label onClick={()=>setSelectedSectionDetails(item)} className='w-100 text-end' data-bs-toggle="modal" data-bs-target="#verticalCenter" style={{cursor: 'pointer'}}>[Change Image]</label>
                                                                        {/* <input id={item?.id} name={item?.id} className="d-none form-control form-control-sm" type="file" onChange={handleFileChange}/> */}
                                                                        <div>
                                                                            <h5 className="mt-0 mb-1">{item?.name}</h5>
                                                                            {item?.description}
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                        </li>
                                                    )
                                                }
                                            )
                                            }
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </>


            } </div>
            <UploadModal productId={productData?.product_id} selectedSectionDetails={selectedSectionDetails} />
    </>
}

export default TemplateConfigure