import { styled } from 'styleh-components'
import { OneObserverForm } from '@skava/forms/build/dist/exports'
import { TextBoxPlugin } from '@skava/forms/build/dist/new-forms/plugins/TextPlugin'
import { StyledInput } from '@skava/forms/build/dist/exports'
import { Header, buttonStyle } from 'abstractions/ShoppingList/Header'
import { Heading, Label } from '@skava/ui/dist/components/atoms/Text'
import { GhostButton, PrimaryButton } from 'presets/Buttons'
import { ButtonText } from '@skava/ui/dist/components/atoms/Button'

const SubmitButton = styled.withComponent(PrimaryButton).attrs({
  'data-qa': 'qa-create-list-save-button',
})`
  width: rem(160);
  margin: 0 rem(16);
  @phone-or-smaller() {
    flex: 0 0 calc(50% - 8px);
    width: auto;
  }
`
const CancelButton = styled.withComponent(GhostButton).attrs({
  'data-qa': 'qa-create-list-cancel-button',
})`
  width: rem(160);
  border: rem(1) solid var(--color-dark-grey);
  ${ButtonText}{
    color: var(--color-dark-grey);
    @font(18, medium);
  }
  @phone-or-smaller() {
    flex: 0 0 calc(50% - 8px);
    width: auto;
  }
`
const ButtonGroup = styled.div`
  display: flex;
  justify-content: flex-end;

  @phone-or-smaller() {
    width: 100%;
  }
`

const StyledTextBoxPlugin = styled.withComponent(TextBoxPlugin)`
  align-items: center;
  flex: 1;
  margin: 0;
  height: auto;
  label{
    text-transform: capitalize;
    font-size: rem(18);
    top: rem(32);
  }
  ${StyledInput} {
    width: 100%;
    font-size: rem(18);
    padding-top: rem(16);
  }
  @phone-or-smaller() {
    width: 100%;
    padding: 0;
  }
`

const StyledObserverForm = styled.withComponent(OneObserverForm)`
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
  @phone-or-smaller() {
    width: 100%;
    flex-direction: column;
  }
`

const StyledPrimaryButton = styled.withComponent(PrimaryButton).attrs({
  'data-qa': 'qa-create-list',
})`
  ${buttonStyle};
  label{
    @font(18,medium);
  }
`

const StyledLabel = styled.withComponent(Label)`
  margin-top: rem(16);
  color: var(--color-black);
  flex: 0 0 100%;
  font-size: rem(20);
  @tablet-or-smaller() {
    font-size: rem(16);
    margin-top: rem(24);
  }
`

const StyledHeading = styled.withComponent(Heading).attrs({
  'data-qa': 'qa-list-title',
})`
  margin: 0;
  margin-left: rem(8);
  text-transform: capitalize;
  color: var(--color-black);
  @tablet-or-smaller() {
    font-size: rem(20);
  }
`

const HeaderPlaceholder = styled.withComponent(Header)`
  @tablet-or-smaller() {
  ${props =>
    props.shouldWrap === true &&
    styled.css`
      flex-direction: column;
    `}
  ${props =>
    props.shouldWrap === false &&
    styled.css`
      align-items: center;
    `}
  }
`

export {
  SubmitButton,
  CancelButton,
  ButtonGroup,
  StyledTextBoxPlugin,
  StyledObserverForm,
  StyledPrimaryButton,
  StyledLabel,
  StyledHeading,
  HeaderPlaceholder,
}