import { buildAppUrl } from '../../shared/urls'
import { apps } from '../state'
import {
  EmptyState,
  StatusDot,
  UrlLeft,
  UrlLink,
  UrlList,
  UrlPort,
  UrlRow,
} from '../styles'

export function Urls() {
  const nonTools = apps.filter(a => !a.tool)

  if (nonTools.length === 0) {
    return <EmptyState>No apps installed</EmptyState>
  }

  return (
    <UrlList>
      {nonTools.map(app => {
        const url = buildAppUrl(app.name, location.origin)
        const running = app.state === 'running'

        return (
          <UrlRow key={app.name}>
            <UrlLeft>
              <StatusDot state={app.state} />
              <span>{app.icon}</span>
              {running ? (
                <UrlLink href={url} target="_blank">{url}</UrlLink>
              ) : (
                <span style={{ color: 'var(--colors-textFaint)' }}>{app.name}</span>
              )}
            </UrlLeft>
            {app.port ? <UrlPort>:{app.port}</UrlPort> : null}
          </UrlRow>
        )
      })}
    </UrlList>
  )
}