import { ImageField } from '@/components/ra-fields/ImageField';
import { SxProps } from '@mui/material';
import { useMemo } from 'react';
import { FieldProps, useRecordContext } from 'react-admin';

type CoverFieldProps = {
  width?: number | string;
  height?: number | string;
  circle?: boolean;
  justify?: 'flex-start' | 'center' | 'flex-end';
  sx?: SxProps;
} & FieldProps;

/**
 * A component that displays an image in a circle or square (with minimum radius).
 *
 * @example
 * // Suppose you have a property, in your record, called 'image' and it contains a base64 string related field called '_image'.
 * // You can use this component as follows:
 * ...
 * <CoverField source="image" />
 *
 * // If you want the Circle version:
 * <CoverField source="image" circle />
 *
 * // With custom width/height:
 * <CoverField source="image" width={100} height={100} />
 */
function CoverField({
  width: defaultWidth = 150,
  height: defaultHeight = 150,
  circle: defaultCircle = false,
  justify: defaultJustify = 'flex-start',
  record: _propRecord,
  sx: _sx,
  ...props
}: CoverFieldProps): JSX.Element {
  const sx = useMemo(
    () => ({
      width: typeof defaultWidth === 'number' ? `${defaultWidth}px !important` : `${defaultWidth} !important`,
      height: typeof defaultHeight === 'number' ? `${defaultHeight}px !important` : `${defaultHeight} !important`,
      borderRadius: defaultCircle ? '50%' : 1.5,
      ..._sx
    }),
    [defaultWidth, defaultHeight, defaultCircle, _sx]
  );
  const _recordContext = useRecordContext();
  const record = _propRecord || _recordContext;

  return (
    <ImageField
      sx={(theme: any) => ({
        margin: 0,
        display: 'flex',
        justifyContent: defaultJustify,
        '& img': {
          margin: '0px !important',
          border: `1px solid ${theme.palette.divider}`,
          objectFit: 'cover !important',
          ...sx,
          minWidth: sx.width,
          minHeight: sx.height
        }
      })}
      {...props}
      record={record}
    />
  );
}

export { CoverField };
export type { CoverFieldProps };