import React from "react";
import { connect } from "react-redux";

import { IFolderTree, IRootState } from "@ax/types";
import { Icon } from "@ax/components";

import MenuList from "./MenuList";
import * as S from "./style";

const FolderTree = (props: IProps) => {
	const { folders, folderID, title, hidden, hideRoot, trimNames, createAction, onClick } = props;

	const NewFolderButton = () =>
		createAction ? (
			<S.NewIconWrapper onClick={createAction}>
				<Icon name="newFolder" size="16" />
			</S.NewIconWrapper>
		) : (
			<></>
		);

	const handleRootClick = () => onClick(null);

	return (
		<>
			{!hideRoot && (
				<S.Item selected={!folderID} onClick={handleRootClick}>
					<S.RootName>All Media</S.RootName>
					<NewFolderButton />
				</S.Item>
			)}
			{title && <S.Title>{title}</S.Title>}
			<S.TreeWrapper>
				<MenuList
					list={folders}
					hidden={hidden}
					trimNames={trimNames}
					createAction={createAction}
					folderID={folderID}
					onClick={onClick}
				/>
			</S.TreeWrapper>
		</>
	);
};

interface IProps {
	folders: IFolderTree[];
	folderID: number | null;
	title?: string;
	hidden?: number[];
	hideRoot?: boolean;
	trimNames?: boolean;
	createAction?(): void;
	onClick(folderID: number | null): void;
}

const mapStateToProps = (state: IRootState) => ({
	folders: state.gallery.foldersTree,
});

export default connect(mapStateToProps)(FolderTree);
