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

const StyledTextPlugin = styled(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(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(MaterialIcon).attrs({
  'data-qa': 'qa-add-list',
}) `
  g {
    fill: var(--color-light-grey);
  }
  transform: scale(1.3);
  circle {
    display: none;
  }
`

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