import styled from "@emotion/styled"
import { memo } from "react"
import Icon from "@aet/icons/macro"
import { css } from "@emotion/css"
import { useTranslation } from "react-i18next"
import { gql, useMutation } from "~/generated/graphql"
import { Favicon } from "./Favicon"
import { FileActions } from "./style"
import type { Data } from "../App"
import { LinkButton } from "./LinkButton"
import { italic } from "~/shared/theme/styled"

interface EntryProps {
  tag: string
  files: Data[]
}

const LeftClickable = styled.div`
  display: flex;
  flex-grow: 1;
  padding-right: 0.1rem;
  cursor: pointer;
`

function edit(section: string) {
  open(`options.html?open=${section}`, "_blank")
}

const TOGGLE_FILE = gql<"PopupToggleStyle">`
  mutation PopupToggleStyle($id: ID!, $enabled: Boolean!) {
    setFile(id: $id, input: { enabled: $enabled }) {
      id
      enabled
    }
  }
`

export const Entry = memo<EntryProps>(({ tag, files }) => {
  const { t } = useTranslation()
  const [toggleFile] = useMutation(TOGGLE_FILE)

  return (
    <EntryContainer>
      <EntryItem>
        <LeftClickable>
          {tag ? (
            <span style={{ fontWeight: 600 }}> {tag}</span>
          ) : (
            <span className={italic}> {t("file.untagged")}</span>
          )}
        </LeftClickable>
      </EntryItem>
      <SubsectionList>
        {files.map(s => (
          <Subsection data-id={s.id} key={s.id}>
            {Boolean(s.icon) && (
              <Favicon
                src={s.icon!}
                className={css`
                  height: 19px;
                  margin-top: 2px;
                  margin-right: 6px !important;
                  width: 19px;
                `}
              />
            )}
            <LeftClickable onClick={() => edit(s.id)}>{s.name}</LeftClickable>
            <FileActions
              className={css`
                min-width: 53px;
              `}
            >
              <LinkButton
                onClick={() => {
                  void toggleFile({
                    variables: {
                      id: s.id,
                      enabled: !s.enabled,
                    },
                  })
                }}
              >
                {s.enabled ? (
                  <Icon icon="MdCheckBox" />
                ) : (
                  <Icon icon="MdCheckBoxOutlineBlank" />
                )}
              </LinkButton>
              <LinkButton onClick={() => edit(s.id)}>
                <Icon icon="MdEdit" />
              </LinkButton>
            </FileActions>
          </Subsection>
        ))}
      </SubsectionList>
    </EntryContainer>
  )
})

const EntryContainer = styled.div`
  &:first-child {
    margin-top: -0.3em;
  }
  &:last-child {
    margin-bottom: -0.3em;
  }
`

const EntryItem = styled.div`
  border-radius: 3px;
  display: flex;
  margin-left: -9px;
  margin-right: -4px;
  padding: 0.3em 3px 0.3em 9px;

  &:hover {
    background: rgba(206, 222, 235, 0.3);
  }
`

const SubsectionList = styled.ol`
  margin: 0;
  padding: 0;
  list-style-type: none;
  // list-style-type: hiragana-iroha;
`

const Subsection = styled.li`
  border-radius: 3px;
  color: #444;
  display: flex;
  margin-left: -6px;
  margin-right: calc(-1px - 3px);
  padding: 0.18em 3px 0.18em 5px;

  &:hover {
    background: rgba(167, 182, 194, 0.3);
  }
  &:first-child {
    margin-top: -0.15em;
  }
  &:last-child {
  }

  @media (prefers-color-scheme: dark) {
    color: #999;
  }
`
