import { Icon } from "@ax/components";
import type { ISite } from "@ax/types";

import RecentSiteItem from "./RecentSiteItem";

import * as S from "./style";

const RecentSitesHeader = ({ isRecentSitesListDisplayed, toggleRecentSites }: IRecentSitesHeaderProps) => (
	<S.SectionHeader data-testid="recent-sites-header" isRecentSites={true}>
		<S.Title data-testid="recent-sites-title" isActive={isRecentSitesListDisplayed}>
			Recent sites
		</S.Title>
		<S.CollapseButton data-testid="recent-sites-collapse-button" onClick={toggleRecentSites}>
			{isRecentSitesListDisplayed ? (
				<>
					<S.Label data-testid="recent-sites-hide-label">Hide recent sites </S.Label> <Icon name="UpArrow" />
				</>
			) : (
				<>
					<S.Label data-testid="recent-sites-show-label">Show recent sites </S.Label> <Icon name="DownArrow" />
				</>
			)}
		</S.CollapseButton>
	</S.SectionHeader>
);

const RecentSitesList = ({ recentSites, isRecentSitesListDisplayed, toggleRecentSites }: IRecentSitesListProps) => (
	<S.RecentSites data-testid="recent-sites-list" fullWidth={recentSites.length >= 5}>
		<RecentSitesHeader isRecentSitesListDisplayed={isRecentSitesListDisplayed} toggleRecentSites={toggleRecentSites} />
		<S.RecentSitesItemsWrapper data-testid="recent-sites-items-wrapper" isHidden={!isRecentSitesListDisplayed}>
			{recentSites.map((site: ISite) => (
				<RecentSiteItem key={site.id} site={site} />
			))}
		</S.RecentSitesItemsWrapper>
	</S.RecentSites>
);

interface IRecentSitesHeaderProps {
	isRecentSitesListDisplayed: boolean;
	toggleRecentSites: () => void;
}

export interface IRecentSitesListProps {
	recentSites: ISite[];
	isRecentSitesListDisplayed: boolean;
	toggleRecentSites: () => void;
}

export default RecentSitesList;
