import { FC } from 'react'
import styled from 'styled-components'

import { colors } from '../style-vars'
import { FocusLS, LevelItem } from './common'
import { ZoomInCustomerItem } from './ZoomInCustomerItem'

interface UnknownContentProps {
  unknowns: LevelItem[]
  focusLS: FocusLS
  onTrackOpen: (url: string, rid: string) => void
}

const ZoomInWrapper = styled.div`
  width: 100%;
  height: 100%;
  padding: 42px 72px;
  box-sizing: border-box;
`

const ScrollList = styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  ::-webkit-scrollbar {
    display: none;
  }
`

const ThumbnailWrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  .num {
    font-size: 14px;
    font-weight: bold;
    color: ${colors.fgMain};
    height: 45%;
    display: flex;
    align-items: center;
  }
  .text {
    font-size: 12px;
    font-weight: 500;
    color: ${colors.fgSecondary};
    height: 35%;
    display: flex;
    align-items: center;
  }
`

export const UnknownContent: FC<UnknownContentProps> = ({ unknowns, focusLS, onTrackOpen }) => {
  return focusLS[0] === 0 && focusLS[1] === 0 ? (
    <ZoomInWrapper>
      <ScrollList>
        {unknowns.map((it) => (
          <ZoomInCustomerItem key={it.name} data={it} onTrackOpen={onTrackOpen} />
        ))}
      </ScrollList>
    </ZoomInWrapper>
  ) : (
    <ThumbnailWrapper>
      {unknowns.length ? (
        <>
          <div className="num">{unknowns.length}家</div>
          <div className="text">未分类</div>
        </>
      ) : null}
    </ThumbnailWrapper>
  )
}