import { styled } from 'styleh-components'
import { OneObserverForm } from '@skava/forms/build/dist/src/new-forms/OneForm/OneForm'
import { TextPlugin } from '@skava/forms/build/dist/src/new-forms/plugins/TextPlugin'
import {
  StyledInput,
  StyledLabelText,
} from '@skava/forms/build/dist/src/new-forms/inputs'
import { MaterialIcon } from 'atoms/MaterialIcon'
import {
  SelectDropDown,
  StyledOption,
  StyledSelect,
} from 'molecules/SelectDropDown'

const StyledTextPlugin = styled.withComponent(TextPlugin)`
  margin: 0;
  width: 100%;
  height: rem(44);

  ${StyledInput} {
    border: none;
    display: flex;
    width: 100%;
  }
  ${StyledLabelText} {
    left: 0;
    color: var(--color-black);
  }
`

const StyledOneObserverForm = styled.withComponent(OneObserverForm)`
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-light-grey);
  &:hover, &:active {
    border-bottom: 1px solid var(--color-dark-grey);
  }
`

const StyledIconContainer = styled.span``

const StyledPlusIcon = styled.withComponent(MaterialIcon).attrs({
  'data-qa': 'qa-add-list',
})`
  g {
    fill: var(--color-light-grey);
  }
  transform: scale(1.3);
  circle {
    display: none;
  }
`

const StyledSelectDropDown = styled.withComponent(SelectDropDown)`
  ${StyledSelect} {
    padding-left: rem(8);
  }
  ${StyledOption} {
    padding-left: rem(20);
    &:last-child:hover {
      background: transparent;
      ${StyledPlusIcon} {
        g {
          fill: var(--color-blue);
        }
      }
    }
  }
`

export {
  StyledTextPlugin,
  StyledOneObserverForm,
  StyledSelectDropDown,
  StyledIconContainer,
  StyledPlusIcon,
}