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

import { colors } from '../style-vars'
import { FocusLS, LevelItem } from './common'
import { ZoomInCustomerItem } from './ZoomInCustomerItem'
import { FreshMark } from './FreshMark'
import addDocIcon from '../assets/medical-clipboard.svg'

interface CustomerListProps {
  list: LevelItem[]
  focusLS: FocusLS
  l: number
  s: number
  onTrackOpen: (url: string, rid: string) => void
}

const OpacityChange = keyframes`
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
`

const ListZoomInWrapper = styled.div`
  width: 100%;
  height: 100%;
  padding: 36px 64px;
  box-sizing: border-box;
  opacity: 0;
  animation: 0.24s ${OpacityChange} 0.12s ease-out forwards;
`

const ListThumbnailWrapper = styled.div`
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 2px 0;
`

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 ThumbnailItem = styled.div<{ s: number; avail: boolean }>`
  flex-shrink: 0;
  box-sizing: border-box;
  padding-right: 8px;
  height: 22px;
  line-height: 22px;
  margin: 8px 8px 0 8px;
  background-color: ${({ s }) => `rgba(255, 255, 255, ${0.6 + s * 0.05})`};
  font-weight: 600;
  font-size: 12px;
  max-width: calc(100% - 16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 16px;
  color: ${colors.fgMain};
  box-shadow: 0 1px 6px 0px rgb(0 0 0 / 16%);
  position: relative;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s ease-in;
  display: flex;
  align-items: center;

  &:last-child {
    margin-bottom: 8px;
  }

  &:hover {
    background-color: rgba(255, 255, 255, 1);
  }

  .cusname {
    overflow: hidden;
    text-overflow: ellipsis;
  }
`

const AddDocIcon = styled.img`
  display: flex;
  align-items: center;
  margin-left: 2px;
  height: 10px;
  opacity: 0.4;
`

// const CornerLabel = styled.div<{ l: number }>`
//   position: absolute;
//   left: -18px;
//   top: -18px;
//   width: 36px;
//   height: 36px;
//   transform-origin: center;
//   transform: rotate(-45deg) scale(0.5);
//   display: flex;
//   align-items: flex-end;
//   justify-content: center;
//   line-height: 12px;
//   font-size: 12px;
//   font-weight: 800;
//   color: ${colors.white};
//   background-color: ${({ l }) => levelColors[`l${l}`][levelColors[`l${l}`].length - 1]};
// `

export const CustomerList: FC<CustomerListProps> = ({ list, focusLS, l, s, onTrackOpen }) => {
  return focusLS[0] === l && focusLS[1] === s ? (
    <ListZoomInWrapper>
      <ScrollList>
        {list.map((c) => (
          <ZoomInCustomerItem key={c.name} data={c} onTrackOpen={onTrackOpen} />
        ))}
      </ScrollList>
    </ListZoomInWrapper>
  ) : (
    <ListThumbnailWrapper>
      <ScrollList>
        {list.map((c) => (
          <ThumbnailItem
            key={c.name}
            onClick={() => onTrackOpen(c.bhr || '', c.rid || '')}
            avail={!!c.bhr}
            s={s}
          >
            {!!c.curStaySec && (
              <FreshMark
                deltSec={c.curStaySec}
                name={c.name}
                pm={c.pm}
                firstPMLarkLink={c.firstPMLarkLink}
              />
            )}
            <span className="cusname">{c.name}</span>
            {/* {c.ct.includes('Top KA') ? (
                <CornerLabel l={l}>TK</CornerLabel>
              ) : c.ct.includes('Top Lighthouse') ? (
                <CornerLabel l={l}>TL</CornerLabel>
              ) : (
                ''
              )} */}
            {!c.bhr && <AddDocIcon src={addDocIcon} />}
          </ThumbnailItem>
        ))}
      </ScrollList>
    </ListThumbnailWrapper>
  )
}