import React, { useState, useEffect } from 'react'
import { KTSVG, toAbsoluteUrl } from '../../../../_metronic/helpers'
import { IUser } from './core/_models'
import axios from 'axios'

export const LIST_ALL_USER = `${process.env.REACT_APP_API_URL}/listusers.php`

const ListUsers: React.FC = () => {
    type ServerData = {
        UserName: string;
        PartnerID: number;
    }

    const [data, setData] = useState<ServerData[]>([]);
    const getData = async (): Promise<void> => {
        await axios.post<ServerData[]>(LIST_ALL_USER)
        .then(users => {
            console.log("Response data: " + users.data)
            setData(users.data);
        })
    }

    useEffect(() => {
        getData()
        console.log("Input data ", data)       //Is empty?
    }, []);


    return (
        <div className={`card mb-5 mb-xl-8`}>
            {/* begin::Header */}
            <div className='card-header border-0 pt-5'>
                <h3 className='card-title align-items-start flex-column'>
                    <span className='card-label fw-bolder fs-3 mb-1'>Felhasználók listája</span>
                </h3>
            </div>
            {/* end::Header */}
            {/* begin::Body */}
            <div className='card-body py-3'>
                {/* begin::Table container */}
                <div className='table-responsive'>
                    {/* begin::Table */}
                    <table className='table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4'>
                        {/* begin::Table head */}
                        <thead>
                            <tr className='fw-bolder text-muted'>
                                <th className='min-w-150px'>User Name</th>
                                <th className='min-w-140px'>Partner</th>
                                <th className='min-w-120px'>Permission</th>
                            </tr>
                        </thead>
                        {/* end::Table head */}
                        {/* begin::Table body */}


                        <tbody>
                            {data.map((user, index) => (
                                <tr key={index}>
                                    <td>
                                        <div className='d-flex align-items-center'>
                                            <div className='d-flex justify-content-start flex-column'>
                                                <span className='text-dark fw-bolder fs-6'>
                                                    {user.UserName}
                                                </span>
                                                <span className='text-muted fw-bold text-muted d-block fs-7'>
                                                    HTML, JS, ReactJS
                                                </span>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span className='text-dark fw-bolder d-block fs-6'>
                                            Intertico
                                        </span>
                                        <span className='text-muted fw-bold text-muted d-block fs-7'>
                                            Web, UI/UX Design
                                        </span>
                                    </td>
                                    <td className='text-end'>
                                        <div className='d-flex flex-column w-100 me-2'>
                                            <div className='d-flex flex-stack mb-2'>
                                                <span className='text-muted me-2 fs-7 fw-bold'>50%</span>
                                            </div>
                                            <div className='progress h-6px w-100'>
                                                <div
                                                    className='progress-bar bg-primary'
                                                    role='progressbar'
                                                    style={{ width: '50%' }}
                                                ></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div className='d-flex justify-content-end flex-shrink-0'>
                                            <a
                                                href='#'
                                                className='btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1'
                                            >
                                                <KTSVG path='/media/icons/duotune/art/art005.svg' className='svg-icon-3' />
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                        {/* end::Table body */}
                    </table>
                    {/* end::Table */}
                </div>
                {/* end::Table container */}
            </div>
            {/* begin::Body */}
        </div>
    )
}

export { ListUsers }