import React from 'react';
import download from "../../../assets/images/download-arrow.svg";
import './dynamiclist.scss'

type DynamicListProps = {
    instructions: {
        key: string,
        class: string,
        type: string,
        title: string
    }[]
    listData?: any
    isLoading?: boolean,
    projectContracts?:boolean,
    pagination?: {
        pageSize: number,
        currentPage: number
    }
    onRowClick?: (n:any)=>void
}

/**
 * Creates a List
 * The instructions contains info about each column
 * > the key of data object
 * > the class name whoch is used for styling
 * > type to make the download button
 *
 * paginations data is used for the indexing
 */

const DynamicList = ({
    onRowClick, instructions, listData, isLoading, pagination = {
        pageSize: 10,
        currentPage: 1,
        
    }, projectContracts
                     }: DynamicListProps) => {
    return (
        <div className={'dynamic-list'}>
            <div className="list-head">
                {
                    instructions.map(i =>
                        <span key={i.key} className={i.class}>{i.title}</span>
                    )
                }
            </div>
            {
                listData &&  listData.length == 0 &&
                <p className='mt-5 ps-4'>
                    Δεν υπάρχουν αποτελέσματα.
                </p>
            }
            {
                isLoading || listData && listData.map((item: any, i: number) =>

                    <div className="list-row" key={(pagination.currentPage - 1) * pagination.pageSize + i + 1}>
                        <span className={'index'}>{(pagination.currentPage - 1) * pagination.pageSize + i + 1}.</span>
                        {
                            instructions.map(ins => {
                                let view = item[ins.key];
                                if (ins.type == 'date'){
                                    view = new Date(item[ins.key]).toLocaleDateString()
                                }
                                if (ins.type == 'secret'){
                                    view = '****'
                                }
                                if (ins.type == 'number'){
                                    view = item[ins.key].toLocaleString('el-GR')
                                }
                                return (
                                    ins.type != 'download' ?
                                        <span key={ins.key+ins.type} className={ins.class}>{view}</span>
                                        :
                                        <span key={ins.key+ins.type} className={`download ${ins.class} ${item[ins.key] || 'inactive'}`}>
                                            <a href={item[ins.key]} download>
                                              <img src={download}
                                                   className={`gray-icon ${item[ins.key] || 'inactive-icon'}`}
                                                   alt="download"/>
                                                 <span>Download {item.acronym} Evaluation</span>
                                            </a>
                                        </span>
                                )
                            })
                        }
                    {
                        projectContracts && projectContracts ? <a className={projectContracts ? 'rescom-project-contracts-btn' : 'rescom-project-contracts-btn inactive'}
                         onClick={()=>onRowClick && onRowClick(item)}>Συμβάσεις</a> : ''
                    }
                    </div>
                )
            }
            {
                isLoading &&
                Array(10).fill(null).map((_, i) => {
                    return <div key={i} className={'list-row skeleton'}></div>
                })
            }
        </div>
    );
}

export default DynamicList;