import { styled } from 'styleh-components'
import Label from 'atoms/Text/Label'
import { ToggleItemWrapper } from 'molecules/ToggleList'

const SwatchItemWrapper = styled.withComponent(ToggleItemWrapper) `
  margin: 0 .5rem rem(12) 0;
  display: flex;
  align-items: center;
  font-weight: 500;

  ${props =>
    props.isDisabled &&
    styled.css`
    opacity: 0.3;

    pointer-events: all;
    &:hover {
      cursor: not-allowed;
    }
    &:active {
      pointer-events: none;
    }
  `};
`

const ColorSwatchLabel = styled.withComponent(Label) `
  margin-left: rem(12);
  font-weight: 500;
`

const ColorItemBox = styled.div`
  border: 3px solid transparent;
  transition: border-color 0.24s ease-in-out;

  ${props =>
    props.isSelected &&
    styled.css`
      border-color: var(--color-blue);
    `};

  display: flex;
  align-items: center;
  justify-content: center;
`

/**
 * @todo should be it's own component....
 */
const ColorItemContent = styled.div`
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--color-light-grey);

  ${props =>
    props.value &&
    props.value.includes('#') &&
    styled.css`
      background-color: ${props.value};
    `};

  ${props =>
    props.value &&
    props.value.includes('http') &&
    styled.css`
      background-image: url(${props.value});
    `};
`

export { SwatchItemWrapper, ColorItemBox, ColorItemContent, ColorSwatchLabel }