import styled, { css } from 'styled-components/macro'

import { customScrollbar } from 'features/Common/customScrollbar'

export const Wrapper = styled.div`
  position: relative;
  display: flex;
  align-items: center;
`

export const Button = styled.button`
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  width: 192px;
  height: 44px;
  padding-left: 20px;

  ::after {
    content: '';
    position: absolute;
    right: 2px;
    bottom: 50%;
    transform: rotate(45deg);
    width: 9px;
    height: 9px;
    border-right: 2px solid;
    border-bottom: 2px solid;
    border-color: ${({ theme }) => theme.colors.white};
  }
`

export const ButtonTitle = styled.span`
  padding-left: 10px;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: -0.32px;
  color: ${({ theme }) => theme.colors.white};
`

export const ListWrapper = styled.div`
  width: 192px;
  height: 220px;
  z-index: 1;
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  padding: 10px;
  background-color: ${({ theme }) => theme.colors.comboboxBackground};
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
`

export const LangsList = styled.ul`
  display: flex;
  height: 100%;
  flex-wrap: wrap;
  overflow-y: auto;
  ${customScrollbar}

  ::-webkit-scrollbar {
    width: 5px;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
  }
`

type LangsItemProps = {
  selected: boolean,
}

export const LangsItem = styled.li<LangsItemProps>`
  padding-left: 10px;
  margin-right: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  width: 100%;
  height: 34px;
  border-radius: 2px;
  transition: 0.3s;
  font-weight: normal;
  font-size: 16px;
  color: ${({ theme }) => theme.colors.white70};
  :hover {
    background-color: #99999940;
    cursor: pointer;
  }

  ${({ selected, theme }) => (
    selected
      ? css`
          font-weight: 600;
          color: ${theme.colors.white};
        `
      : ''
  )}
`

export const LangName = styled.span`
  padding-left: 10px;
`

type Position = {
  col: number,
  row: number,
}

const flagPositions: Record<string, Position> = {
  bg: { col: 10, row: 1 },
  cs: { col: 1, row: 3 },
  de: { col: 5, row: 4 },
  en: { col: 4, row: 12 },
  es: { col: 12, row: 10 },
  fr: { col: 1, row: 4 },
  hu: { col: 0, row: 5 },
  it: { col: 8, row: 5 },
  ja: { col: 6, row: 2 },
  lv: { col: 6, row: 6 },
  nl: { col: 5, row: 8 },
  pl: { col: 4, row: 9 },
  pt: { col: 5, row: 9 },
  ru: { col: 8, row: 9 },
  uk: { col: 2, row: 12 },
  zh: { col: 6, row: 2 },
}

const getFlagPosition = (lang_iso: string) => {
  const { col, row } = flagPositions[lang_iso] || { col: 99, row: 99 }
  return `${col * -24}px ${row * -16}px`
}

type FlagIconProps = {
  lang_iso: string,
}

export const FlagIcon = styled.span<FlagIconProps>`
  display: inline-block;
  width: 24px;
  height: 16px;
  background-image: url('/images/flags-sprite.png');
  background-repeat: no-repeat;
  background-size: 360px;
  background-position: ${({ lang_iso }) => getFlagPosition(lang_iso)};
`