import { styled } from 'styleh-components'
import { application } from '@skava/state'
import { TextBoxPlugin } from '@skava/forms/build/dist/src/new-forms/plugins/TextPlugin'
import {
  StyledInput,
  StyledLabelText,
} from '@skava/forms/build/dist/src/new-forms/inputs'
import { StyledBaseText } from 'atoms/Text'
import { ButtonLabel, ButtonIcon } from 'atoms/Button'
import { GhostButton } from 'presets/Buttons'
import { MaterialIcon } from 'atoms/MaterialIcon'
import {
  Toggle,
  SwitchLabel,
  StyledSwitchIcon,
  SwitchIconWrapper,
  IconWrapper,
} from 'molecules/Toggle'
import {
  ConfirmationCard,
  ConfirmButton,
  CancelButton,
  CardText,
} from 'organisms/ConfirmationCard'
import { ProductItemWrapper } from 'abstractions/ShoppingList/Item'
import { ProductList } from './ProductList'

const deviceSpecific = application.isMobile ? 296 : 184 * 3

const StyledText = StyledBaseText.as('span')

const StyledGhostButton = styled.withComponent(GhostButton)`
  border: 0;
  width: auto;
  height: rem(20);
  padding: 0;
  ${ButtonLabel} {
    margin: 0;
    color: var(--color-black);
  }
`
const StyledListDetails = styled.withComponent(StyledGhostButton).attrs({
  'data-qa': 'qa-list-details',
})`
  height: rem(30);
  @phone-or-smaller() {
    height: rem(20);
  }
  ${ButtonIcon} {
    margin: 0 0 0 rem(5);
    .arrow-wrapper {
      width: auto;
      height: auto;
    }
  }
  ${(props: { isConfirming: boolean }) =>
    props.isConfirming === true &&
    styled.css`
      opacity: 0.3;
    `};
`

const StyledTextBoxPlugin = styled.withComponent(TextBoxPlugin)`
  align-item: center;
  height: rem(24);
  padding: 0;
  margin: 0;
  ${StyledInput} {
    border: 0;
    border-bottom: 1px solid transparent;
    width: rem(190);
    height: rem(24);
    border-radius: 0;
    padding: 0;
    font-size: rem(18);
    font-weight: 700;
    text-overflow: ellipsis;
    &:active, &:focus {
      border-bottom: 1px solid var(--color-light-grey);
    }
    &:focus {
      outline: none;
    }
  }
  ${StyledLabelText} {
    display: none;
  }
`

const StyledListName = styled.withComponent(StyledText).attrs({
  'data-qa': 'qa-list-name',
})`
  color: var(--color-black);
  font-weight: 700;
  font-size: rem(18);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  line-height: rem(24);
`

const StyledListCount = styled.withComponent(StyledText)`
  margin: 0 0 0 rem(8);
  font-size: rem(18);
  flex: 1;
`

const ListNameWrapper = styled.div`
  display: flex;
  flex-direction: row;
  align-items: baseline;
  width: rem(200);
  margin-right: rem(24);
  @tablet-or-smaller() {
    border-bottom: 1px solid transparent;
    margin: 0 0 rem(8) 0;
  }
  @phone-or-smaller() {
    width: rem(190);
  }
  ${(props: { isConfirming: boolean; isActive: boolean }) =>
    props.isActive === false &&
    styled.css`
      &:hover {
        border-bottom: 1px solid var(--color-light-grey);
      }
    `};
  ${(props: { isActive: boolean; isConfirming: boolean }) =>
    props.isConfirming === true &&
    styled.css`
      opacity: 0.3;
      pointer-events: none;
    `};
`

const StyledRemoveIcon = styled.withComponent(MaterialIcon).attrs({
  'data-qa': 'qa-delete-button',
})`
  width: rem(22);
  height: rem(22);
  cursor: pointer;
  margin-right: rem(24);
  @phone-or-smaller() {
    margin-right: rem(16);
  }
`

const StyledToggleSwitch = styled.withComponent(Toggle)`
  ${IconWrapper} {
    margin-right: 0;
  }
  ${SwitchIconWrapper} {
    align-items: center;
  }
  ${StyledSwitchIcon} {
    order: 1;
  }
  ${SwitchLabel} {
    margin: 0 rem(20) 0 0;
    color: var(--color-black);
    text-transform: capitalize;
    @phone-or-smaller() {
      margin-right: rem(16);
    }
  }
`

const StyledConfirmationCard = styled.withComponent(ConfirmationCard)`
  ${ConfirmButton} {
    margin: 0 rem(18) 0 0;
  }
  ${CancelButton} {
    border: 1px solid var(--color-light-grey);
    background-color: transparent;
    ${ButtonLabel} {
      color: var(--color-light-grey);
    }
  }
  ${CardText} {
    margin-right: rem(18);
    @phone-or-smaller() {
      order: 1;
      align-self: flex-end;
      margin: 0 0 rem(24) 0;
    }
  }

  ${ConfirmButton}, ${CancelButton} {
    @tablet-or-smaller() {
      width: rem(120);
    }
    @phone-or-smaller() {
      width: 100%;
    }
  }

  @tablet-or-smaller() {
    justify-content: flex-end;
    flex: 0 0 100%;
  }

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

  @tablet-or-smaller() {
    align-self: flex-end;
  }
`

const StyledProductListWrapper = styled.section`
  padding: rem(8) rem(8) 0;
  border: 1px solid transparent;
  max-height: ${deviceSpecific}px;
  overflow-y: auto;

  ${ProductItemWrapper} {
    padding: rem(18) 0;
    @phone-or-smaller() {
      padding: rem(16) 0;
    }
    &:first-child {
      padding-top: 0;
    }
  }
  @phone-or-smaller() {
    padding: rem(4) rem(4) 0;
  }
  ${(props: { isConfirming: boolean }) =>
    props.isConfirming === true &&
    styled.css`
      opacity: 0.5;
      pointer-events: none;
      border: 1px solid var(--color-light-grey);
    `};
`

const StyledProductList = styled.withComponent(ProductList).attrs({
  'data-qa': 'qa-product-container',
})``

export {
  StyledListDetails,
  StyledListName,
  StyledListCount,
  ListNameWrapper,
  StyledRemoveIcon,
  StyledToggleSwitch,
  StyledConfirmationCard,
  StyledProductListWrapper,
  StyledTextBoxPlugin,
  StyledProductList,
}