import React from 'react';

import { theme } from '@veeqo/ui';
import useDropdown from 'hooks/useDropdown';

import { ViewName } from 'components/ui/Views/types';
import {
  Button,
  Text,
  Bold,
  Glyph,
  Wrap,
  Notification,
  Container,
  Dropdown,
  Item,
} from '../styled';

const accentColor = theme.colors.secondary.blue.base;

type UnsavedChangesPropsType = {
  className: string;
  viewName: ViewName;
  onDiscard: () => void;
  handleSaveToCurrentView: () => void;
  handleCreateCustomViewWithCurrentFilters: () => void;
};

const UnsavedChanges = ({
  className, onDiscard, viewName, handleSaveToCurrentView, handleCreateCustomViewWithCurrentFilters,
}: UnsavedChangesPropsType) => {
  const { shouldShowDropdown, toggleShouldShowDropdown, closeDropdown } = useDropdown();

  return (
    <Notification>
      <Container className={className}>
        <Glyph name="attention" color={accentColor} />
        <Wrap>
          <Text variant="body" margin="0 4px 0 0">
            You have unsaved changes to
          </Text>
          <Bold variant="bodyBoldDark">{`${viewName}`}</Bold>
        </Wrap>
        <Button marginRight="16" onClick={onDiscard} size="sm">
          Discard changes
        </Button>
        <Dropdown
          reversed
          shouldShowDropdown={shouldShowDropdown}
          onClickAway={closeDropdown}
          cta={(
            <Button variant="primary" onClick={toggleShouldShowDropdown} size="sm" dropdown>
              Save changes
            </Button>
          )}
        >
          <Item onClick={handleCreateCustomViewWithCurrentFilters}>
            <Text variant="body">Create new view</Text>
          </Item>
          <Item onClick={handleSaveToCurrentView}>
            <Text variant="body" margin="0 4px 0 0">
              Save changes to
            </Text>
            <Text variant="bodyBoldDark">{viewName}</Text>
          </Item>
        </Dropdown>
      </Container>
    </Notification>
  );
};

export default UnsavedChanges;