import React, { ReactNode } from "react";
import { useColorModeValue, Flex, Text, FlexProps } from "@chakra-ui/react";
import PropTypes from "prop-types";
import { hexToRgb, luminance } from "utils";

interface ListItemProps extends FlexProps {
	icon?: ReactNode;
	iconBg: string;
	title: string;
	description?: string;
	selected?: boolean;
	isDisabled?: boolean;
	hasArrow?: boolean;
	compact?: boolean;
	children?: ReactNode;
}

export function ListItem({
	icon,
	iconBg,
	title,
	description,
	selected,
	isDisabled,
	hasArrow,
	compact,
	children,
	...rest
}: ListItemProps) {
	let iconColor = "gray.700";

	if (/^#[0-9A-F]{6}$/i.test(iconBg)) {
		const colorOne = hexToRgb(iconBg);

		if (colorOne) {
			const constrast = luminance(colorOne.r, colorOne.g, colorOne.b);
			iconColor = constrast < 0.31 ? "gray.100" : "gray.700";
		}
	}

	const bg = useColorModeValue("gray.50", "gray.900");
	const selectedBg = useColorModeValue("gray.100", "black");
	const titleColor = useColorModeValue("gray.800", "gray.200");
	const descriptionColor = useColorModeValue("gray.500", "gray.500");
	return (
		<Flex
			as="a"
			px={4}
			py={compact ? 1 : 2}
			w="100%"
			maxW="100%"
			flexShrink={0}
			cursor="pointer"
			alignItems="center"
			opacity={isDisabled ? "0.5" : "1"}
			bg={selected ? selectedBg : "transparent"}
			_hover={!selected ? { bg } : undefined}
			pointerEvents={isDisabled ? "none" : "auto"}
			{...rest}
		>
			{children ? (
				children
			) : (
				<>
					<Flex pos="relative" mr={3}>
						<Flex
							borderRadius={compact ? 3 : 4}
							width={compact ? 6 : 8}
							height={compact ? 6 : 8}
							alignItems="center"
							justifyContent="center"
							bg={iconBg}
							fontSize={compact ? "12px" : "initial"}
							color={iconColor}
						>
							{icon ? icon : title && title.charAt(0)}
						</Flex>
					</Flex>
					<Flex flexDirection="column">
						<Text
							overflow="hidden"
							fontSize="12px"
							lineHeight="1.2"
							textOverflow="ellipsis"
							whiteSpace="nowrap"
							fontWeight="600"
							color={titleColor}
						>
							{title}
						</Text>
						{!compact && description && (
							<Text
								overflow="hidden"
								fontSize="12px"
								lineHeight="1.2"
								textOverflow="ellipsis"
								whiteSpace="nowrap"
								color={descriptionColor}
								mt="4px"
							>
								{description}
							</Text>
						)}
					</Flex>
					{hasArrow && (
						<Flex ml="auto" pl={4}>
							<svg width="6" height="9">
								<path
									d="M 1.5 1 L 5 4.5 L 1.5 8"
									fill="transparent"
									strokeWidth="1.5"
									stroke="currentColor"
									strokeLinecap="round"
								></path>
							</svg>
						</Flex>
					)}
				</>
			)}
		</Flex>
	);
}

ListItem.propTypes = {
	icon: PropTypes.any,
	iconBg: PropTypes.string,
	title: PropTypes.string,
	description: PropTypes.string,
	selected: PropTypes.bool,
	isDisabled: PropTypes.bool,
	hasArrow: PropTypes.bool,
	compact: PropTypes.bool,
	children: PropTypes.any,
};