import * as React from "react"
import { ISettingsApp } from "../types"
import {
	ListAllPayTypes,
	ListAllExchanges,
	ListAllCurrencies,
	ListAllOrderStatus,
	// ListAllSubAccounts,
	ListAllTickers,
} from "../components"

export const SettingsApp: React.FC<ISettingsApp> = props => {
	const {
		dataConstants,
		scrollStyle,
		handlerFilterDetails,
		updateItemDetails,
	} = props

	return (
		<div
			className="tab-pane fade"
			id="appSettings"
			role="tabpanel"
			aria-labelledby="appSettingsTab"
		>
			<div className="row mt-1">
				<ul className="nav nav-pills mb-1" id="appSettingsTab" role="tablist">
					{/* Exchange_Settings_Tab*/}
					<li className="nav-item">
						<a
							className="nav-link active"
							id="exchangeSettingsTab"
							data-toggle="pill"
							href="#exchangeSettings"
							role="tab"
							aria-controls="exchangeSettings"
							aria-selected="true"
						>
							Exchanges
						</a>
					</li>
					{/* Currency_Settings_Tab*/}
					<li className="nav-item">
						<a
							className="nav-link"
							id="currencySettingsTab"
							data-toggle="pill"
							href="#currencySettings"
							role="tab"
							aria-controls="currencySettings"
							aria-selected="false"
						>
							Currencies
						</a>
					</li>
					{/* payType_Settings_Tab*/}
					<li className="nav-item">
						<a
							className="nav-link"
							id="payTypeSettingsTab"
							data-toggle="pill"
							href="#payTypeSettings"
							role="tab"
							aria-controls="payTypeSettings"
							aria-selected="false"
						>
							payTypes
						</a>
					</li>
					{/* statusOrder_Settings_Tab*/}
					<li className="nav-item">
						<a
							className="nav-link"
							id="statusOrderSettingsTab"
							data-toggle="pill"
							href="#statusOrderSettings"
							role="tab"
							aria-controls="statusOrderSettings"
							aria-selected="false"
						>
							Order Statuses
						</a>
					</li>
					{/* tickers_Settings_Tab*/}
					<li className="nav-item">
						<a
							className="nav-link"
							id="tickerSettingsTab"
							data-toggle="pill"
							href="#tickerSettings"
							role="tab"
							aria-controls="tickerSettings"
							aria-selected="false"
						>
							Tickers
						</a>
					</li>
				</ul>
			</div>
			<div className="tab-content" id="appSettingsTabContent">
				{/* exchangeSettingsTab */}
				<div
					className="tab-pane fade show active"
					id="exchangeSettings"
					role="tabpanel"
					aria-labelledby="exchangeSettingsTab"
				>
					<ListAllExchanges
						dataConstants={dataConstants}
						scrollStyle={scrollStyle}
						handlerFilterDetails={handlerFilterDetails}
					/>
				</div>
				{/* currencySettingsTab */}
				<div
					className="tab-pane fade"
					id="currencySettings"
					role="tabpanel"
					aria-labelledby="currencySettingsTab"
				>
					<ListAllCurrencies
						dataConstants={dataConstants}
						scrollStyle={scrollStyle}
						handlerFilterDetails={handlerFilterDetails}
						updateItemDetails={updateItemDetails}
					/>
				</div>
				{/* payTypeSettingsTab */}
				<div
					className="tab-pane fade"
					id="payTypeSettings"
					role="tabpanel"
					aria-labelledby="payTypeSettingsTab"
				>
					<ListAllPayTypes
						dataConstants={dataConstants}
						scrollStyle={scrollStyle}
						handlerFilterDetails={handlerFilterDetails}
						updateItemDetails={updateItemDetails}
					/>
				</div>
				{/* statusOrderSettingsTab */}
				<div
					className="tab-pane fade"
					id="statusOrderSettings"
					role="tabpanel"
					aria-labelledby="statusOrderSettingsTab"
				>
					<ListAllOrderStatus
						dataConstants={dataConstants}
						scrollStyle={scrollStyle}
						handlerFilterDetails={handlerFilterDetails}
						updateItemDetails={updateItemDetails}
					/>
				</div>
				{/* tickerSettingsTab */}
				<div
					className="tab-pane fade"
					id="tickerSettings"
					role="tabpanel"
					aria-labelledby="tickerSettingsTab"
				>
					<ListAllTickers
						dataConstants={dataConstants}
						scrollStyle={scrollStyle}
						handlerFilterDetails={handlerFilterDetails}
						updateItemDetails={updateItemDetails}
					/>
				</div>
			</div>
		</div>
	)
}
