import styled from 'styled-components';
import CSS from 'csstype';

import {
  theme,
  Tooltip as UITooltip,
  View as UIView,
  Text as CommonText,
  AnimatedDropdown as CommonAnimatedDropdown,
  BaseContainer as CommonContainer,
} from '@veeqo/ui';
import UISortableViews, { SortableView as UISortableView } from 'components/ui/SortableViews';
import CommonGlyph from 'components/common/Glyph';

export const viewsContainerLeftMargin = 80;
export const viewsContainerRightMargin = 80;

const Wrap = styled(CommonContainer)`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
`;

const Container = styled(CommonContainer)`
  display: flex;
  flex-direction: row;
  margin-left: ${viewsContainerLeftMargin}px;
  margin-right: ${viewsContainerRightMargin}px;
  background-color: ${theme.colors.neutral.grey.lightest};
  width: calc(100% - 160px);
  overflow-y: visible;
  overflow-x: hidden;
`;

const View = styled(UIView)``;

const Controls = styled(CommonContainer)`
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  z-index: 2;
  height: 100%;
`;

const LeftControls = styled(Controls)`
  left: 0;

  &:after {
    content: '';
    position: absolute;
    pointer-events: none;
    background: linear-gradient(to left, transparent, #cdd1d5 90%);
    height: 68px;
    width: 15px;
    left: 73px;
    z-index: -1;
  }
`;

const RightControls = styled(Controls)`
  right: 0;

  &:after {
    content: '';
    position: absolute;
    pointer-events: none;
    background: linear-gradient(to right, transparent, #cdd1d5 90%);
    height: 68px;
    width: 15px;
    right: 73px;
    z-index: -1;
  }
`;

const Button = styled(CommonContainer)`
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: ${theme.colors.neutral.grey.light};
  cursor: pointer;
  min-width: 40px;
  height: 100%;
`;

const Glyph = styled(CommonGlyph)``;

const Dropdown = styled(CommonAnimatedDropdown)`
  &-container {
    position: relative;
    left: 40px;
  }

  div[class*='basic-dropdown'] {
    left: 40px;
    overflow-y: auto;
    max-height: 500px;
  }
`;

const SortableViews = styled(UISortableViews)``;

const Tooltip = styled(UITooltip)`
  &-container {
    height: 100%;
  }

  &-hoverable {
    height: 100%;
  }
`;

const Col = styled(CommonContainer)`
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
`;

const Text = styled(CommonText)<CSS.StandardProperties>`
  margin: ${(props) => props.margin};
  white-space: nowrap;
`;

const Info = styled(CommonContainer)`
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 16px;
  border-top: 1px solid ${theme.colors.neutral.grey.base};
  border-bottom: 1px solid ${theme.colors.neutral.grey.base};

  & > ${Glyph} {
    margin-right: 10px;
  }
`;

const FixedViews = styled(CommonContainer)`
  display: flex;
  flex-direction: column;
  padding: 24px 12px 20px 16px;
`;

const FixedView = styled(UISortableView)``;

const LoaderContainer = styled(CommonContainer)`
  height: 40px;
  margin: 14px 24px;
`;

export {
  Col,
  Wrap,
  Dropdown,
  SortableViews,
  Button,
  Controls,
  LeftControls,
  RightControls,
  Container,
  View,
  Glyph,
  Info,
  Text,
  Tooltip,
  FixedViews,
  FixedView,
  LoaderContainer,
};