import {
	ListCount,
	ListOption,
	SelectInput,
	TableInfo,
} from '../../../styles/Components';
import { ViewTitleCountType } from '../../../assets/data';
import { TitleItem, TitleItemLabel, TitleItemValue } from '../../../styles/ModuleComponents';

const ViewTableInfo = ({children, total, total_all, handleOrderBy, handlePageSize, countType = ViewTitleCountType.total}) => {
	return (
		<TableInfo>
			{total !== undefined && total_all !== undefined &&
			<ListCount>
				{ countType === ViewTitleCountType.total && `총 : ${total ?? 0} 건 / ${total_all ?? 0} 건`}
				{ countType === ViewTitleCountType.calium &&
					<>
						<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>
					</>
				}
			</ListCount>}
			<ListOption>
				<SelectInput className="input-select" onChange={e => handleOrderBy(e.target.value)}>
					<option value="DESC">내림차순</option>
					<option value="ASC">오름차순</option>
				</SelectInput>
				<SelectInput name="" id="" className="input-select" onChange={e => handlePageSize(e.target.value)}>
					<option value="50">50개</option>
					<option value="100">100개</option>
				</SelectInput>
				{children}
			</ListOption>
		</TableInfo>
	);
};

export default ViewTableInfo;