import axios from 'axios';
import { motion } from 'framer-motion';
import React, { useEffect, useState } from 'react';

interface PopupDialogProps {
  onCloseSize: (brand:string,attributeId:string,buttonType:string) => void;
  category:string;
  subCategory:string;
}

const AddSizeModal: React.FC<PopupDialogProps> = ({ onCloseSize,category,subCategory}) => {


  const [input,setInput] = useState<string>('')
  const [attributes,setAttributes] = useState<any>([])

  const handleBrandChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInput(e.target.value);
  };

  const handleSubmit = (buttonType:string) => {
    let _attributeId = attributes.find((e:any) => e.attributeName==='Size')
    console.log(_attributeId._id)
    onCloseSize(input,_attributeId._id,buttonType);
  };

  useEffect(() => {
    getAttributes();
    return () => {
    }
  }, [])

  const getAttributes = async() => {
    const res = await axios.get(`https://api.jazzagain.com/public/index.php/api/getAttributes?categoryId=${category}&subCategoryId=${subCategory}`)
    setAttributes(res.data.attributes)
    console.log(res.data.attributes)
  }
  
  return (
    <div 
    className="fixed inset-0 flex justify-center items-center z-50">
      <div className="absolute inset-0 bg-black opacity-50"></div>
      <div className="max-w-lg z-10">
        <motion.div 
          initial={{y:-300}}
          animate={{x:0,y:0}}
          transition={{duration:0.5}}
        className="bg-white shadow-lg rounded-lg p-[1.5rem] sm:p-[3rem]">
          <h2 className="text-xl font-semibold mb-4">Product Size</h2>
        
          
          <div className="text-sm my-4">
            <label htmlFor="Nbrand">Size *</label>
            <input
              type="text"
              name="brand"
              id="brand"
              className="w-full p-2 rounded-lg border border-gray-300 mt-1"
              onChange={handleBrandChange}
            />
          </div>
          <div className='flex space-x-2 justify-around'>
          <button
            onClick={()=>handleSubmit('cancel')}
            className="w-full p-2 rounded-lg bg-[#383736] hover:bg-[#FE342B] text-white"
          >
            Cancel
          </button>
          <button
            onClick={()=>handleSubmit('submit')}
            className="w-full p-2 rounded-lg bg-[#383736] hover:bg-[#FE342B] text-white"
          >
            Submit
          </button>
          </div>
        </motion.div>
      </div>
    </div>
  );
};

export default AddSizeModal;