import React from 'react';
import { ViewType } from '../../types';
import Info from './Info';

import { Dropdown, Text, Item } from './styled';

interface OptionsDropdownPropsType {
  className: string;
  shouldShowDropdown: boolean;
  view: ViewType;
  onMakeDefault: () => void;
  onEdit: () => void;
  onDuplicate: () => void;
  onDelete: () => void;
  handleCloseDropdown: () => void;
}

const OptionsDropdown = ({
  className,
  view,
  shouldShowDropdown,
  onMakeDefault,
  onEdit,
  onDuplicate,
  onDelete,
  handleCloseDropdown,
}: OptionsDropdownPropsType) => (
  <Dropdown
    className={className}
    onClickAway={handleCloseDropdown}
    shouldShowDropdown={
        (
          (!view.duplicatable && view.type === 'fixed' && !view.default)
          || view.type !== 'fixed'
          || (view.duplicatable && view.type === 'fixed')
        ) && shouldShowDropdown
      }
  >
    {view.type === 'fixed' && <Info text="Fixed views cannot be edited / deleted" />}
    {!view.default && (
      <Item onClick={onMakeDefault} isFixed={view.type === 'fixed'} isDefault={view.default}>
        <Text>Make default view</Text>
      </Item>
    )}
    {view.type !== 'fixed' && (
      <Item onClick={onEdit} isFixed={false} isDefault={view.default}>
        <Text>Edit</Text>
      </Item>
    )}
    {(view.duplicatable && view.type === 'fixed') || view.type !== 'fixed' ? (
      <Item onClick={onDuplicate} isFixed={view.type === 'fixed'} isDefault={view.default}>
        <Text>Duplicate</Text>
      </Item>
    ) : null}
    {view.type !== 'fixed' && (
      <Item onClick={onDelete} isFixed={false} isDefault={view.default}>
        <Text>Delete</Text>
      </Item>
    )}
  </Dropdown>
);

export default OptionsDropdown;