import { type FC } from 'react';
import { useNavigate } from 'react-router';

import { IconCalendarEvent } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuTitle from '@material-hu/components/design-system/Title';

import { type Event } from 'src/types/events';

import { eventsRoutes } from '../routes';
import { useCopetin, useDescription } from '../utils';

import ResponseButton from './ResponseButton';

type Props = {
  event: Event;
  includeDateInCopetin?: boolean;
  acceptResponse?: boolean;
  source?: string;
};

export const EventCard: FC<Props> = ({
  event,
  includeDateInCopetin,
  acceptResponse = false,
  source,
}) => {
  const theme = useTheme();
  const navigate = useNavigate();
  const description = useDescription(event);
  const copetin = useCopetin(event, includeDateInCopetin);
  const hasCoverPicture = !!event.coverPictureUrl;

  const onHandleClick = () => {
    navigate(eventsRoutes.event(event.id, source));
  };

  return (
    <HuCardContainer
      sx={{ width: '100%' }}
      onClick={onHandleClick}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
        }}
      >
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
          }}
        >
          <Stack
            {...(hasCoverPicture && {
              component: 'img',
              src: event.coverPictureUrl,
            })}
            {...(!hasCoverPicture && {
              // doesn't work as normal children
              children: (
                <IconCalendarEvent
                  size={40}
                  color={theme.palette.new.graphics.brand[500]}
                />
              ),
            })}
            sx={{
              minWidth: 120,
              width: 120,
              height: 60,
              borderRadius: 1,
              backgroundColor: theme.palette.new.background.layout.brand,
              alignItems: 'center',
              justifyContent: 'center',
            }}
          />
          <HuTitle
            description={description}
            title={event.name}
            copetin={copetin}
            variant="M"
            sx={{
              ml: 1.5,
              '.MuiTypography-globalXXS': {
                color: theme.palette.new.text.neutral.brand,
              },
              '.MuiTypography-globalM': {
                overflowWrap: 'anywhere',
              },
            }}
          />
        </Stack>
        {acceptResponse && (
          <ResponseButton
            event={event}
            invitationStatus={event.invitationStatus}
            creatorId={event.userId}
          />
        )}
      </Stack>
    </HuCardContainer>
  );
};

export default EventCard;