import React from 'react';
import IconButton from '@mui/material/IconButton';
import styled from 'styled-components';

const Bar = styled.div<{ $canMove: boolean }>`
  display: flex;
  align-items: center;
  padding: 0.3em;
  cursor: ${(p) => (p.$canMove ? 'move' : 'default')};
  background-color: #9accff;
  color: #fff;
  width: 100%;
`;

declare var kiosk: any;

const OpenSettingButton = (props: { onClick: () => void }) => {
  if (typeof kiosk !== 'undefined' && kiosk?.removeButton) return null;

  return (
    <IconButton
      size="small"
      onMouseDown={(e) => e.stopPropagation()}
      onClick={props.onClick}
      style={{ marginRight: 4 }}
    >
      <img
        src="/icon8/user/Einstellung.svg"
        alt="Einstellung"
        style={{ width: 20, height: 20 }}
      />
    </IconButton>
  );
};

const Name = styled.h3`
  margin: 2px 0 0 5px;
  color: rgba(0, 0, 0, 0.54);
  font-size: 1.4rem;
  font-weight: 600;
`;

export type TitleBarProps = {
  move?: (e: MouseEvent | React.MouseEvent) => void;
  openSettingDialog?: () => void;
  name: string;
  hideConfig?: boolean;
  disableMove?: boolean;
};

const TitleBar: React.FC<TitleBarProps> = ({
  move,
  openSettingDialog,
  name,
  hideConfig = false,
  disableMove = false,
}) => {
  const activeIsClone =
    typeof window !== 'undefined' && (window as any).__ACTIVE_DASH_IS_CLONE === true;

  const canMove = !!move && !disableMove && !activeIsClone;
  const showConfig = !!openSettingDialog && !hideConfig && !activeIsClone;

  return (
    <Bar
      $canMove={canMove}
      onMouseDown={(e) => {
        if (canMove) move!(e);
      }}
    >
      {showConfig && <OpenSettingButton onClick={openSettingDialog!} />}
      <Name>{name}</Name>
    </Bar>
  );
};

export default TitleBar;