import * as React from "react"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import {
	faAngleDoubleUp,
	faAngleDoubleDown,
} from "@fortawesome/free-solid-svg-icons"
import {
	// CONSTANTS,
	CONSTANTS_STORAGE,
} from "../constants"
import { IExchangeSwitcher } from "../types"
import { changeBackgroundBody, getDataFromLocalStorage } from "../common"
import "../styles/ExchangeSwitcher.css"

export const ExchangeSwitcher: React.FC<IExchangeSwitcher> = props => {
	const { handlerSwitcher, handlerFilterDetails, activeExchange } = props

	const dataConstants = getDataFromLocalStorage(CONSTANTS_STORAGE)
	const { exchanges } = dataConstants

	const listExchanges = exchanges.map((item: any, index: number) => {
		const activeClass =
			item.id === activeExchange ? "activeItem" : "inActiveItem"
		const itemList = item.status ? (
			<span
				key={index}
				title={item.name}
				className={activeClass}
				onClick={() => {
					// handlerSwitcher(item.id)
					handlerFilterDetails("", "activeExchange", item.id)
					changeBackgroundBody(item.bg)
				}}
			>
				{item.shortName}
			</span>
		) : null

		return itemList
	})

	return (
		<div className="exchanges-list exchanges-item">
			{/* <span title="Up" className="" onClick={() => {}}>
				<FontAwesomeIcon icon={faAngleDoubleUp} />
			</span> */}
			{listExchanges}
			{/* <span title="Down" className="" onClick={() => {}}>
				<FontAwesomeIcon icon={faAngleDoubleDown} />
			</span> */}
		</div>
	)
}
