import styled from 'styled-components';

import {
  theme,
  BaseContainer as CommonContainer,
  AnimatedDropdown as CommonAnimatedDropdown,
  Button as CommonButton,
  SegmentedControl as CommonSegmentedControl,
  TextField as FormsTextField,
  Text,
} from '@veeqo/ui';
import CommonGlyph from 'components/common/Glyph';

export const DEFAULT_CONTENT_WIDTH = 400;

const Dropdown = styled(CommonAnimatedDropdown)``;

const Content = styled(CommonContainer)`
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: ${DEFAULT_CONTENT_WIDTH}px;
  padding: 24px;
`;

const Info = styled(CommonContainer)`
  & > ${Text} {
    margin-bottom: 24px;
  }
`;

const Header = styled(CommonContainer)`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
`;

const Icon = styled(CommonGlyph)`
  cursor: pointer;
`;

const Field = styled(FormsTextField)`
  width: unset;
`;

const Bottom = styled(CommonContainer)`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  padding: 24px;
  border-top: 1px solid ${theme.colors.neutral.grey.dark};
`;

const Button = styled(CommonButton)`
  &:first-child {
    margin-right: 16px;
  }
`;

const SharingOptionsContainer = styled(CommonContainer)`
  margin-top: 24px;
`;

const SharingOptions = styled(CommonSegmentedControl)`
  margin-top: 16px;

  > button {
    flex: 1;
    box-shadow: none;
  }
`;

export {
  Content,
  Header,
  Dropdown,
  Icon,
  Field,
  Bottom,
  Button,
  Info,
  SharingOptionsContainer,
  SharingOptions,
};