import { memo } from "react"
import { css } from "@emotion/css"
import Icon from "@aet/icons/macro"
import { useEvent } from "@aet/hooks"
import { useSelector } from "~/options/store"
import { useTabCloser } from "./utils"
import { ButtonWrapper } from "~/shared/styled"

export const TabCloseButton = memo((props: { fileId: string; fileName: string }) => {
  const { fileId, fileName } = props
  const close = useTabCloser()

  const isDirty = useSelector(s => s.dirtyFileIds.has(fileId))

  const onClick = useEvent((e: React.MouseEvent) => {
    e.stopPropagation()
    void close(fileId, fileName)
  })

  return (
    <ButtonWrapper onClick={onClick}>
      {isDirty ? (
        <Icon icon="GoDot" />
      ) : (
        <Icon
          icon="MdOutlineClose"
          className={css`
            margin-left: 4px;
          `}
        />
      )}
    </ButtonWrapper>
  )
})
