import {
  createStyles,
  Card,
  Image,
  Stack,
  Text,
  Group,
  Flex,
} from "@mantine/core";
import globe from "./assets/globe.png";

const useStyles = createStyles((theme) => ({
  card: {
    backgroundColor: theme.white,
  },

  title: {
    fontWeight: 700,
    fontFamily: theme.fontFamily,
    lineHeight: 1.2,
    "&:hover": {
      color: "#eb7b1a",
    },
  },

  body: {
    padding: theme.spacing.md,
  },

  address: {
    "&:hover": {
      cursor: "pointer",
      filter:
        "brightness(0) saturate(100%) invert(50%) sepia(92%) saturate(1223%) hue-rotate(352deg) brightness(97%) contrast(91%)",
    },
  },
}));

export function PlaceCard({
  fid,
  date_start,
  date_finish,
  place_name,
  photo_name,
  book_name,
  book_date,
  coordinates,
  selected,
  clickAction,
}) {
  const { classes } = useStyles();

  return (
    <Card
      withBorder
      shadow="sm"
      radius="md"
      p={0}
      w={"100%"}
      className={classes.card}
    >
      <Group noWrap position="apart">
        <Stack p="md">
          <Flex direction="column" className={classes.address} onClick={() => clickAction(fid)} color={fid === selected ? '#e66a5a' : 'black'}>
            <Text className={classes.title} mt="xs" mb={0}>
              {place_name}{" "}
              {date_start == date_finish
                ? date_start
                : `${date_start} - ${date_finish}`}
            </Text>
            <Text size="xs">
              {`${coordinates[0].toFixed(3).replace(".", ",")}° 
                ${coordinates[1].toFixed(3).replace(".", ",")}°`}
            </Text>
          </Flex>
          {book_name && book_date && (
            <Text>
              {`${book_name
                .split(", ")
                .map((bn, i) => ({
                  name: bn,
                  date: book_date.split(", ")[i],
                }))
                .sort((a, b) => a.date - b.date)
                .map((book) => `${book.name} (${book.date})`)
                .join(", ")}`}
            </Text>
          )}
        </Stack>
        {photo_name && (
          <Image
            src={`/prishvin-trip/${photo_name.split(", ")[0]}`}
            height={150}
            width={150}
          />
        )}
      </Group>
    </Card>
  );
}
