import React, { useCallback } from 'react';

import { ViewId } from '@veeqo/ui/dist/components/View/types';
import { theme, Tag, Text } from '@veeqo/ui';
import { IView } from 'types';

import {
  Row, Dots, Title,
} from './styled';

export interface ViewProps extends IView {
  onClick?: (id: ViewId) => void;
  className?: string;
}

const View = ({
  id, label, onClick, isDefault, className,
}: ViewProps) => {
  const handleClick = useCallback(
    () => {
      if (onClick) onClick(id);
    },
    [id, onClick],
  );
  const classNames = {
    row: className && `${className}-row`,
    title: className && `${className}-title`,
    tag: className && `${className}-tag`,
    text: className && `${className}-text`,
    dots: className && `${className}-dots`,
  };

  return (
    <Row className={classNames.row}>
      <Title variant="body" className={classNames.title}>{label}</Title>
      {isDefault && (
        <Tag className={classNames.tag}>
          <Text variant="bodySmall" className={classNames.text}>
            Default
          </Text>
        </Tag>
      )}
      {onClick && (
        <Dots
          name="more-horiz"
          color={theme.colors.neutral.ink.base}
          className={classNames.dots}
          onClick={handleClick}
        />
      )}
    </Row>
  );
};

export default View;