import {
	HeaderPaginationContainer,
	ListCount,
	ListOption,
	SelectInput,
	TableInfo,
} from '../../../styles/Components';
import { ORDER_OPTIONS, PAGE_SIZE_OPTIONS, ViewTitleCountType } from '../../../assets/data';
import { TitleItem, TitleItemLabel, TitleItemLink, TitleItemValue } from '../../../styles/ModuleComponents';
import { DynamoPagination } from '../index';
import React from 'react';

const ViewTableInfo = ({
						   children,
						   total,
						   total_all,
							fail_count,
						   onFailCountClick,
						   orderType = 'desc',
						   handleOrderBy,
						   pageType = 'default',
						   handlePageSize,
						   countType = ViewTitleCountType.total,
						   pagination,
						   goToNextPage,
						   goToPrevPage
					   }) => {
	return (
		<TableInfo>
			{total !== undefined && total_all !== undefined &&
				<ListCount>
					{COUNT_TYPE_RENDERERS[countType] ?
						COUNT_TYPE_RENDERERS[countType](total, total_all, fail_count, onFailCountClick) :
						COUNT_TYPE_RENDERERS[ViewTitleCountType.total](total, total_all)}
				</ListCount>
			}
			{pagination !== undefined && goToNextPage !== undefined && goToPrevPage !== undefined &&
				<HeaderPaginationContainer>
					<DynamoPagination
						pagination={pagination}
						onNextPage={goToNextPage}
						onPrevPage={goToPrevPage}
					/>
				</HeaderPaginationContainer>
			}
			<ListOption>
				{handleOrderBy !== undefined && <OrderBySelect orderType={orderType} handleOrderBy={handleOrderBy} />}
				{handlePageSize !== undefined && <PageSelect pageType={pageType} handlePageSize={handlePageSize} />}
				{children}
			</ListOption>
		</TableInfo>
	);
};

const COUNT_TYPE_RENDERERS = {
	[ViewTitleCountType.total]: (total, total_all) => `총 : ${total ?? 0} 건 / ${total_all ?? 0} 건`,
	[ViewTitleCountType.calium]: (total, total_all, fail_count, onFailCountClick) => (
		<>
			<TitleItem>
				<TitleItemLabel>누적 충전</TitleItemLabel>
				<TitleItemValue color='#b7e0c3' fontWeight='bold'>{total_all ?? 0}</TitleItemValue>
			</TitleItem>
			<TitleItem>
				<TitleItemLabel>잔여 수량</TitleItemLabel>
				<TitleItemValue color='#B39063' fontWeight='bold'>{total ?? 0}</TitleItemValue>
			</TitleItem>
			<TitleItem>
				<TitleItemLabel>에코시스템 실패</TitleItemLabel>
				<TitleItemLink color='#D33B27' fontWeight='bold' onClick={onFailCountClick}>{fail_count ?? 0}</TitleItemLink>
			</TitleItem>
		</>
	),
};

const OrderBySelect = ({ orderType, handleOrderBy }) => {
	const options = ORDER_OPTIONS[orderType] || ORDER_OPTIONS.desc;

	return (
		<SelectInput className="input-select" onChange={e => handleOrderBy(e.target.value)}>
			{options.map(option => (
				<option key={option.value} value={option.value}>{option.label}</option>
			))}
		</SelectInput>
	);
};

const PageSelect = ({ pageType, handlePageSize }) => {
	const options = PAGE_SIZE_OPTIONS[pageType] || PAGE_SIZE_OPTIONS.default;

	return (
		<SelectInput name="" id="" className="input-select" onChange={e => handlePageSize(e.target.value)}>
			{options.map(option => (
				<option key={option.value} value={option.value}>{option.label}</option>
			))}
		</SelectInput>
	);
};

export default ViewTableInfo;