import React from 'react';
import { Box, Checkbox, IconType, Radio, Text, ThemeColorType } from '@nova-hf/ui';
import { Emoji } from 'assets/images/mobile-signup';
import { TextProps } from 'frisco/PredefinedProps';
import Image from 'next/image';

// eslint-disable-next-line
type IconProp = IconType | React.ReactNode;

type Select = {
  isSelected: boolean;
  onClick?: () => void;
  children?: React.ReactNode;
  emoji?: Emoji;
  price?: string;
  isPopular?: boolean;
  color?: ThemeColorType;
  selectUnit?: 'radio' | 'checkbox';
  isRecommended?: boolean;
  isDisabled?: boolean;
  shouldHideSubtitle?: boolean;
  openAtAllTimes?: boolean;
} & TextProps;

const Select = ({
  isSelected,
  onClick,
  children,
  title,
  subtitle,
  emoji,
  price,
  selectUnit = 'radio',
  isPopular = false,
  isRecommended,
  color = 'pink',
  shouldHideSubtitle = false,
  isDisabled,
  openAtAllTimes = false,
}: Select) => {
  const shouldShowSubtitle = shouldHideSubtitle ? !isSelected : true;
  const shouldRenderPriceWithTitle = !subtitle && !emoji;
  return (
    <Box
      position="relative"
      display="flex"
      flexDirection="column"
      height="fitContent"
      padding={2}
      backgroundColor={isSelected ? 'white' : 'grey100'}
      marginBottom={2}
      borderStyle="solid"
      borderWidth={'2px'}
      borderRadius="16px"
      borderColor="transparent"
      transition="slow"
      width="100%"
      disabled={isDisabled}
      {...(isSelected && {
        borderColor: color,
      })}
      renderAs="button"
      boxShadow={{ focusVisible: 'focused' }}
      cursor={{ hover: isDisabled ? 'default' : 'pointer' }}
      {...(!!onClick &&
        !isDisabled && {
          onClick,
        })}
    >
      {/** border radius of inner conentent is 16px border radius - 4px border */}
      <Box
        position="relative"
        overflow="hidden"
        margin={-2}
        style={{ borderRadius: '14px' }}
        paddingRight={emoji ? 8 : 0}
      >
        <Box display="flex" flexDirection="column" marginLeft={2} paddingY={2}>
          <Box
            display="inline-flex"
            {...(shouldRenderPriceWithTitle && {
              paddingRight: 2,
              justifyContent: 'space-between',
            })}
            alignItems="center"
          >
            {selectUnit === 'radio' ? (
              <Radio isChecked={isSelected} color="pink" isDecorative />
            ) : (
              <Checkbox type="checked" isChecked={isSelected} color="pink" />
            )}
            <Text variant="pMediumBold" marginLeft="0.5" style={{ width: '100%' }}>
              {title}
            </Text>
            {(isPopular || isRecommended) && (
              <Box display="flex" justifyContent="flex-start">
                <Box
                  display="flex"
                  alignItems="center"
                  borderRadius="8px"
                  backgroundColor={isRecommended ? 'pink' : 'ocean'}
                  paddingX={1}
                  marginLeft={1}
                  {...(shouldRenderPriceWithTitle && { width: '100%' })}
                >
                  <Text variant="button" color={isRecommended ? 'white' : 'black100'}>
                    {isRecommended ? 'Við mælum með' : 'Vinsælast'}
                  </Text>
                </Box>
              </Box>
            )}
            {shouldRenderPriceWithTitle && (
              <Box display="flex" justifyContent="flex-end" alignItems="flex-end">
                <Text variant="pSmallBold" color={isDisabled ? 'grey500' : 'black100'} noWrap>
                  {price}
                </Text>
                <Text variant="pSmallRegular" color="grey600" noWrap>
                  {'/ mán'}
                </Text>
              </Box>
            )}
          </Box>
          {shouldShowSubtitle && (
            <Box
              marginLeft={3}
              marginRight={2}
              display="flex"
              justifyContent="space-between"
              {...(emoji && { marginRight: 7 })}
            >
              <Text
                variant="pSmallRegular"
                color={isDisabled ? 'grey500' : 'grey700'}
                marginLeft="0.5"
              >
                {subtitle}
              </Text>
              {price && !shouldRenderPriceWithTitle && (
                <Box display="flex" justifyContent="flex-end" alignItems="flex-end">
                  <Text variant="pSmallBold" color={isDisabled ? 'grey500' : 'black100'} noWrap>
                    {price}
                  </Text>
                  <Text variant="pSmallRegular" color="grey600" noWrap>
                    {'/ mán'}
                  </Text>
                </Box>
              )}
            </Box>
          )}
        </Box>
        {emoji && (
          <Box
            position="absolute"
            top={1}
            right={1}
            zIndex="1"
            style={{ filter: isSelected ? 'none' : 'grayscale(1)' }}
          >
            <Image
              src={require(`/src/assets/images/mobile-signup/${emoji}.png`).default.src}
              alt={emoji}
              width={56}
              height={56}
            />
          </Box>
        )}
      </Box>
      {(isSelected || openAtAllTimes) && children && (
        <Box display="flex" marginTop={2}>
          {children}
        </Box>
      )}
    </Box>
  );
};

export default Select;