import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import { Box, Button } from '@mui/material';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import Tooltip from '@mui/material/Tooltip';
import { Icon } from '@iconify/react';
import { useNodeContext } from '../../contexts/node';
import Line from './line';
import { StyledComponentRow } from './component-cell';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function OptionalComponentCell({
  meta,
  dependencies = [],
  logoUrl = '',
  setInstallComponentMeta
}) {
  const node = useNodeContext();
  const {
    t
  } = useLocaleContext();
  const handleOpen = () => {
    setInstallComponentMeta(meta);
  };
  const size = 40;
  return /*#__PURE__*/_jsxs(StyledDiv, {
    id: `optional-component-${meta.did}`,
    children: [/*#__PURE__*/_jsxs("div", {
      className: "cell",
      children: [/*#__PURE__*/_jsxs("div", {
        className: "component-left",
        children: [/*#__PURE__*/_jsx("img", {
          className: "component-logo",
          src: logoUrl,
          onError: () => `${node.imgPrefix}/blocklet.png`,
          alt: meta.title,
          style: {
            width: size,
            height: size
          }
        }), /*#__PURE__*/_jsxs("div", {
          className: "component-header",
          children: [/*#__PURE__*/_jsx("div", {
            className: "component-name",
            children: meta.title
          }), /*#__PURE__*/_jsx("div", {
            className: "component-version",
            children: meta.version
          })]
        }), /*#__PURE__*/_jsx(Tooltip, {
          title: [`${t('common.dependents')}: `, dependencies.map(x => /*#__PURE__*/_jsx(Box, {
            sx: {
              pl: 1
            },
            children: `${x.parentTitle} ${x.required ? `(${t('common.required')})` : ''}`
          }, x.parentName + x.mount_point))],
          children: /*#__PURE__*/_jsx(Box, {
            sx: {
              display: 'flex',
              color: 'primary.main',
              ml: 1
            },
            children: /*#__PURE__*/_jsx(Icon, {
              icon: "octicon:package-dependents-16"
            })
          })
        })]
      }), /*#__PURE__*/_jsx("div", {
        style: {
          flex: 1
        }
      }), /*#__PURE__*/_jsx(Box, {
        sx: {
          minWidth: 100,
          display: 'flex',
          justifyContent: 'flex-end'
        },
        children: /*#__PURE__*/_jsx(Button, {
          onClick: handleOpen,
          startIcon: /*#__PURE__*/_jsx(Icon, {
            icon: "ph:download-simple-bold"
          }),
          children: t('common.install')
        })
      })]
    }), /*#__PURE__*/_jsx(Line, {
      class: "line"
    }, "line")]
  });
}
OptionalComponentCell.propTypes = {
  meta: PropTypes.object.isRequired,
  logoUrl: PropTypes.string,
  setInstallComponentMeta: PropTypes.func.isRequired,
  dependencies: PropTypes.arrayOf(PropTypes.shape({
    parentDid: PropTypes.string,
    parentName: PropTypes.string,
    parentPoint: PropTypes.string,
    required: PropTypes.bool
  }))
};
const StyledDiv = styled(StyledComponentRow)`
  .line {
    opacity: 0.5;
  }
  .cell {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .component-left {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    min-width: 0;
  }
  .component-logo {
    width: 40px;
    margin-left: 16px;
    opacity: 0.5;
    border-radius: 10px;
    overflow: hidden;
  }
  .component-header {
    flex: 1;
    min-width: 0;
    opacity: 0.5;
    margin-left: 12px;
    display: flex;
    align-items: center;
    align-items: flex-end;
    cursor: pointer;
  }
  .component-name {
    flex: 1;
    opacity: 0.5;
    color: ${({
  theme
}) => theme.palette.text.primary};
    font-size: 16px;
  }
  .component-version {
    opacity: 0.8;
    color: ${({
  theme
}) => theme.palette.grey[400]};
    font-size: 12px;
    margin-left: 4px;
    transform: translateY(-1px);
  }
`;