import { styled } from 'styleh-components'
import { media, fontValue } from '@skava/styleh-toolset'
import { MaterialIcon } from '@skava/ui/dist/components/atoms/MaterialIcon'
import { ModalBox, ModalTitle } from '@skava/ui/dist/components/organisms/Modal'
import { SocialIconList, IconLink } from '@skava/ui/dist/components/molecules/SocialIconList'
import { StyledBaseText } from '@skava/ui/dist/components/atoms/Text'
import { StyledShareButton, StyledCancelButton } from './Form'

const StyledModalBox = styled.withComponent(ModalBox)`
  width: rem(600);
  padding: rem(12);
  ${media.desktopOrLarger `
    padding: rem(38) rem(32) rem(42);
  `}
  ${media.tabletOrSmaller `
    padding: rem(28) rem(24) rem(32);
  `}
  ${media.phoneOrSmaller `
    padding: rem(16) rem(8) rem(24);
  `}
  ${StyledShareButton}, ${StyledCancelButton} {
    font: ${fontValue(18, 'semi')};
    width: rem(216);
    margin: 0;
    padding: 0;
    border-radius: rem(4);
    ${media.tabletOrSmaller `
      width: rem(165);
    `}
    ${media.phoneOrSmaller `
      width: 100%;
    `}
  }
  ${StyledCancelButton} {
    ${media.tabletOrLarger `
      margin-right: rem(16);
    `}
    ${media.desktopOrLarger `
      margin-right: rem(8);
    `}
    ${media.phoneOrSmaller `
      margin-top: rem(8);
    `}
  }
`
const StyledModalTitle = styled.withComponent(ModalTitle).attrs({
  'data-qa': 'qa-popup-title',
})`
  font: ${fontValue(24, 'semi')};
  ${media.phoneOrSmaller `
    font: ${fontValue(20, 'semi')};
  `}
  text-transform: capitalize;
  padding: 0;
  border: 0;
`
const StyledText = StyledBaseText.as('span')

const StyledListName = styled.withComponent(StyledText).attrs({
  'data-qa': 'qa-list-name',
})`
  text-transform: capitalize;
`

const FlexCenter = styled.div`
  display: flex;
  align-items: center;
  padding-bottom: rem(16);
`

const StyledSocialIconList = styled.withComponent(SocialIconList)`
  position: absolute;
  bottom: rem(50);
  ${media.tabletOrSmaller `
    bottom: rem(40);
  `}
  ${IconLink} {
    width: rem(30);
    height: rem(30);
    padding: 0;
  }

  .svg-icon-pinteresticon-withoutbg, .svg-icon-twittericon {
    transform: scale(0.7, 0.7);
    transform-origin: center;
  }

  ${media.phoneOrSmaller `
    position: relative;
    bottom: 0;
    display: flex;
    justify-content: center;
    padding-top: rem(26);
  `}
`
const StyledShareIcon = styled.withComponent(MaterialIcon).attrs({
  'data-qa': 'qa-list-share',
}) `
  width: rem(22);
  height: rem(22);
  cursor: pointer;
  margin-right: rem(54);
  @phone-or-smaller() {
    margin-right: rem(24);
  }
`

const Wrapper = styled.div`
  margin: 0;
  display: flex;
  align-items: center;
`

export {
  StyledModalBox,
  StyledModalTitle,
  StyledListName,
  FlexCenter,
  StyledSocialIconList,
  Wrapper,
  StyledShareIcon,
}