import React from 'react';
import { Box, Text } from '@nova-hf/ui';
import { TextProps } from 'frisco/PredefinedProps';
import Image from 'next/image';

type MultipleSelectInOneProps = {
  onClick?: () => void;
  selectDudes: React.ReactElement[];
  children?: React.ReactNode;
  emoji?: string;
  title?: string;
  subtitle?: string;
} & TextProps;

const MultipleSelectInOne = ({
  onClick,
  children,
  title,
  subtitle,
  emoji,
  selectDudes,
}: MultipleSelectInOneProps) => {
  const isSelected = selectDudes.some((dude) => dude.props.isSelected);

  return (
    <Box
      position="relative"
      overflow="hidden"
      display="flex"
      flexDirection="column"
      height="fitContent"
      paddingY={2}
      paddingX={2}
      backgroundColor={isSelected ? 'white' : 'grey100'}
      marginBottom={2}
      borderStyle="solid"
      borderWidth={'4px'}
      borderColor={isSelected ? 'pink' : 'transparent'}
      transition="slow"
      width="100%"
      style={{
        borderRadius: '16px',
        backgroundClip: isSelected ? 'border-box' : 'padding-box',
      }}
    >
      <Box
        display="flex"
        flexDirection="row"
        marginBottom={1}
        {...(!!onClick && {
          onClick,
        })}
      >
        <Box display="flex" alignItems="flex-start" minWidth={4} marginRight={1} />
        <Box display="flex" flexDirection="column" justifyContent="flex-start" width={{ sm: 35 }}>
          <Text variant="pMediumBold">{title}</Text>
          <Box display="flex" justifyContent="space-between" alignItems="center">
            <Text variant="pSmallRegular" color="grey500" maxWidth="220px">
              {subtitle}
            </Text>
          </Box>
          {emoji && (
            <Box position="absolute" top={0} right={0} zIndex={'customermenu'}>
              <Image
                src={require(`/src/assets/images/mobile-signup/${emoji}.png`).default.src}
                alt={emoji}
                width={64}
                height={77}
              />
            </Box>
          )}
        </Box>
      </Box>
      {selectDudes.map((dude, index) => (
        <React.Fragment key={index}>{dude}</React.Fragment>
      ))}
      {isSelected && children && (
        <Box display="flex" marginTop={2}>
          {children}
        </Box>
      )}
    </Box>
  );
};

export default MultipleSelectInOne;