import React from 'react';
import { Box, Text, TextButton } from '@wix/design-system';
import { Confirm, Minus } from '@wix/wix-ui-icons-common';
import { CustomFieldType } from '@wix/bex-core';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { observer } from 'mobx-react-lite';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { getDateWithoutTimezone } from '../../utils/datesUtil';

export interface ExtendedColumnProps {
  value?: any;
  type: CustomFieldType;
}

function _ExtendedColumn(props: ExtendedColumnProps) {
  const { dateFormatters } = useWixPatternsContainer();
  const { collectionDataExtension } = useToolbarCollectionContext();
  switch (props.type) {
    case 'shortText':
      return (
        <Text size="small" ellipsis maxLines={1}>
          {props.value}
        </Text>
      );
    case 'date':
      return (
        <Text size="small" ellipsis maxLines={1}>
          {props.value &&
            dateFormatters.medium.format(getDateWithoutTimezone(props.value))}
        </Text>
      );
    case 'dateTime':
      return (
        <Text size="small" ellipsis maxLines={1}>
          {props.value &&
            dateFormatters.mediumTime.format(new Date(props.value))}
        </Text>
      );
    case 'checkbox':
      return (
        <Box
          align="center"
          verticalAlign="middle"
          color={props.value ? 'G10' : 'D10'}
        >
          {props.value ? <Confirm /> : <Minus />}
        </Box>
      );
    case 'longText':
      return (
        <Text size="small" ellipsis maxLines={3}>
          {props.value}
        </Text>
      );
    case 'url':
      return (
        <TextButton
          as="a"
          rel="noopener"
          target="_blank"
          href={props.value}
          ellipsis
        >
          {props.value}
        </TextButton>
      );
    case 'files': {
      if (!props.value || !collectionDataExtension) {
        return null;
      }
      const files = Array.isArray(props.value) ? props.value : [props.value];
      return (
        <collectionDataExtension.DataExtension.FileCardList files={files} />
      );
    }
    case 'dropdown':
      return (
        <Text size="small" ellipsis maxLines={1}>
          {props.value}
        </Text>
      );
    case 'multiSelect':
      return (
        <Text size="small" ellipsis maxLines={1}>
          {props.value?.join(', ')}
        </Text>
      );
    case 'integer':
    case 'decimal':
    default:
      return (
        <Text size="small" ellipsis maxLines={1}>
          {props.value}
        </Text>
      );
  }
}

export const ExtendedColumn = observer(_ExtendedColumn);
