import { blue } from '@ant-design/colors';
import { t } from '@lingui/macro';
import { useLingui } from '@lingui/react';
import { Card, Empty, Segmented } from 'antd';
import React from 'react';
import styled from 'styled-components';
import {
  useSelectedShapeId,
  useShapes,
} from '../../components/annotator/hooks';
import { useStoreInstance } from '../../components/annotator/store-context';

const StyledSegmented = styled(Segmented)`
  & label.ant-segmented-item.ant-segmented-item-selected,
  & .ant-segmented-thumb {
    color: white;
    background-color: ${blue[5]};
  }

  & .ant-segmented-item {
    transition: ${blue[5]} 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
`;

export function AnchorsPosition() {
  const { i18n } = useLingui();
  const storeInstance = useStoreInstance();
  const selectedShapeId = useSelectedShapeId();
  const shapes = useShapes();
  const anchors = React.useMemo(
    () => shapes.filter((s) => s.isAnchor),
    [shapes],
  );

  return (
    <Card title={t(i18n)`Anchors Position`}>
      {anchors.length ? (
        <StyledSegmented
          options={anchors.map((item, index) => ({
            label: t(i18n)`Anchor ${index + 1}`,
            value: item.id,
          }))}
          value={selectedShapeId}
          size="large"
          onChange={(value) => storeInstance.setSelectedShape(value.toString())}
          block
        />
      ) : (
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
      )}
    </Card>
  );
}
