import { observer } from 'mobx-react-lite';
import { useStore } from 'stores/hooks';
import styled from 'styled-components';
import Alert from 'ui/elements/Alert';
import Table from 'ui/elements/Table';
import { Flex } from 'ui/grid';
import { columns } from './config';

const Grid = styled(Flex)`
  flex-direction: column;
`;

const TableWrapper = styled.div`
  td > * {
    margin: 0;
  }
`;

const Validation = observer(() => {
  const store = useStore();

  const messages = store.$tables.insurance.validation.getMessages();

  if (messages?.length) {
    return <Alert type="error" banner message={messages[0]} />;
  }

  return null;
});

const InsuranceTable = observer(() => {
  const store = useStore();

  const { values } = store.$tables.insurance;

  return (
    <TableWrapper>
      <Table
        size="small"
        pagination={false}
        columns={columns}
        dataSource={values}
        scroll={{
          x: true,
        }}
      />
    </TableWrapper>
  );
});

export default function () {
  return (
    <Grid>
      <Validation />
      <InsuranceTable />
    </Grid>
  );
}