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(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(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(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(OneObserverForm) `
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
  @phone-or-smaller() {
    width: 100%;
    flex-direction: column;
  }
`

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

const StyledLabel = styled(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(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(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,
}