import React, { useState } from 'react'

import InputCom from '../../components/Helpers/Inputs/InputCom/index'
import DeleteGroup from './DeleteGroup'
import AddGroup from './AddGroup'

export default function GroupList({groupList, selectedGroup, changeSelectedGroup, setUpdateList}) {

    const [deletePopout, setDeletePopout] = useState({
        status: false,
        data: {}
    })

    const [addGroupPopout, setAddGroupPopout] = useState(false)

    const handleAddGroup = () => {
        setAddGroupPopout(true)
    }

    const handleDeleteGroup = (item) => {
        setDeletePopout({
            status: true,
            data: {...item}
        })
    }


  return (
    <>
        <div className='p-5 w-full lg:w-[400px] min-h-[300px] bg-sky-100 dark:bg-dark-gray rounded-2xl'>
            {/* <h1 className='mb-5 text-lg lg:text-2xl tracking-wide font-bold text-slate-900 dark:text-slate-100'>Jobs Groups</h1> */}
            <div className='flex justify-end items-center'>
                <button onClick={handleAddGroup} className='py-2 px-4 flex justify-center items-center bg-sky-blue hover:bg-sky-600 text-base rounded-full text-white font-bold'>Add Group</button>
            </div>

            {groupList && groupList.length < 1 ?
            <h1 className='my-5 text-lg tracking-wide text-slate-900 dark:text-slate-100'>No Group Found!</h1>
            :
            <div className='my-4 max-h-[400px] overflow-y-auto'>
                <div className='flex flex-col'>
                    {groupList.map(item=> (
                        <div key={item.group_uid} className='p-2 flex gap-2 items-center justify-between w-full'>
                            <div className='flex gap-2 items-center'>
                                <input type='radio' name='grouplist' value={item.group_id} checked={selectedGroup?.id == item?.group_id} onChange={changeSelectedGroup} className='w-[20px] h-[20px] outline-none' />
                                <p className='text-sm lg:text-base text-slate-900 dark:text-slate-100'>{item.group_name}</p>
                            </div>
                            <button onClick={()=>{handleDeleteGroup(item)}} className='rounded-lg text-sm bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-2.5 flex justify-center items-center'>X</button>
                        </div>
                    ))}
                </div>
            </div>
            }
        </div>
        
        {deletePopout.status &&
            <DeleteGroup 
                action={()=>setDeletePopout({status:false, data:{}})}
                situation={deletePopout.status}
                details={deletePopout.data}
            />
        }

        {addGroupPopout &&
            <AddGroup 
                action={()=>setAddGroupPopout(false)}
                situation={addGroupPopout}
                setUpdateList={setUpdateList}
            />
        }
    </>
  )
}