import { styled } from 'styleh-components'
import Text from 'atoms/Text/Label'
import { Button, ButtonLabel } from 'atoms/Button'

/**
 * @todo invalid position names
 * @todo correct timing on transition
 */
const SnackBarWrapper = styled.aside.attrs({
  'data-qa': 'qa-toast',
}) `
  display: flex;
  background: #2c2c2c;
  position: fixed;
  margin: auto auto rem(10) auto;
  padding: rem(8) rem(100);
  min-height: rem(70);

  @media (max-width: 768px) {
    padding: rem(8) rem(20);
    width: calc(100% - 16px);
  }

  /* =========================== */
  transform: translateY(0);
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  ${props =>
    props.isVisible === false &&
    styled.css `
      transform: translateY(150%);
    `};
  ${props =>
    props.isVisible === true &&
    styled.css `
      transform: translateY(0%);
    `};
  /* =========================== */

  ${props =>
    props.position === 'bottomleft' &&
    styled.css `
      top: auto;
      right: auto;
      bottom: 0;
      left: 0;
    `};

  ${props =>
    props.position === 'bottomcenter' &&
    styled.css `
      top: auto;
      right: 0;
      bottom: 0;
      left: 0;
    `};
`

const Message = styled.withComponent(Text) `
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  margin: auto;
`

// TextButton - needs adapter?
/* align-self: flex-end; */
export const SnackBarActionButton = styled.withComponent(Button) `
  color: #009944;
  border: none;
  background-color: transparent;
  padding: 0;
  margin: 0;

  ${ButtonLabel} {
    margin: 0;
  }

`

// @todo
// export const SnackBarActionButtonDismiss
// // max 2
// export const SnackBarActionButtonGroup

export { SnackBarWrapper, Message }